New Component: Table (advanced functionality)

[alisonailea]

Description

Differentiating from Table (simple functionality), this component should provide advanced patterns for data grid interaction and functionality.

This component may wrap or extend a 3rd party library to get the required acceptance criteria to production faster with less maintenance costs.

Research opportunities

• https://tabulator.info/
• https://github.com/vaadin/vaadin-grid (currently used in Maps SDK)
• arcgis-web-components team coordination

Additional research is still required.

Blocked issues: #8912, #8914, #8915, #8917, #9799, #8913, #8916, #8901

User Stories

As a consumer of Calcite I want to

• virtualize creating a Table from a large data set.
• be able to easily render any component inside a Table component.
• have a fast and performant way to find data in existing loaded data set.
• be able to select table rows.
• be able to select table columns
• have a built-in loading state for initialization of large data sets
• have lazy-loading on scroll of additional data rows
• have lazy-loading on scroll of additional data columns
• be able to expand a row to show additional information about the row-set
• wrap content inside a cell
• update / replace / add data to a Table asynchronous
• hide columns (refer to this community post for more context)

Acceptance Criteria

The component should Render large data sets The component should provide a calcite-search to help find data in the set The component should provide a method for updating the data set The component should provide a method for replacing the data set The component should provide a method for adding to the data set The component should provide a UI for a loading state at initialization. The component should allow for lazy-loading additional columns on scroll. The component should allow for lazy-loading additional rows on scroll. Rows with a "details" attribute should expand to show a details pane. Cells with a "wrap" attribute should allow for word wrapping. Cells with a "disable" attribute should be disabled Rows with a "disable" attribute should be disabled Columns with a "disable" attribute should be disabled

Relevant Info

Should be done after: #1574

Helpful Details

3rd party components currently in use at Esri include Vaadin Grid, Tabulator JS, MUI, and React DataGrid. If you are aware of other data grids in use please comment here or let the Calcite team know.

Priority impact

p3 - want for upcoming milestone

Esri team

Calcite (dev)

[github-actions[bot]]

cc @ashetland, @yelenakreyndel, @SkyeSeitz

[forrestlin2020]

Where is Advanced DataGrid?

[geospatialem]

Design will be sought in the May milestone.

Once design has been completed, will be re-routed for dev, targeted for ~the August~ an upcoming release.

[yelenakreyndel]

@geospatialem implementation of the advanced table will not be complete for the August release. The basic version is planned to be. We still don't have an estimate for the completion of the advanced version, and we need to gather it ASAP as advanced data grid has been a primary request for Calcite by Esri product teams for a long time. Design work for the advanced table will be complete in May as mentioned. Could you please get an estimate from Ali for the advanced version?

Here's more detailed info about data-grid Calcite component: https://confluencewikidev.esri.com/display/Calcite/DataGrid You'll see release column for multiple items for the advanced version is marked as TBD. We need to know when we can release the advanced version and what are the different steps for that work. If the work is complex, we need tasks and deadlines for each step.

cc'ing @brittneytewks

[geospatialem]

@yelenakreyndel Once design is complete in May, the milestone will be modified to reflect the upcoming development milestone. I reflected my comment above regarding the dev milestone.

[yelenakreyndel]

@geospatialem I've gathered more information from Ali. For everyone who is reading: We aren't going to ship advanced data table this year. In June/July Ali plans on starting a research on leveraging Tabulator 3rd party data-grid solution. That research will take at least a couple of weeks, and we plan to know in the summer what Calcite direction for the advanced data-grid will be. We will be in touch regarding design direction. But we would definitely need more time to give a concrete answer on what implementation direction we are heading in (Tabulator vs. potentially a custom solution which we intend to refrain from at this point due to complexity of the work and maintenance cost). If there are questions teams are having in the meantime, the following stakeholders would be the right one to connect with:

• Implementation: Ali Stump
• Design: Adam Tirella, Mitchell Cox
• Planning/project management: Yelena Kreyndel

Cc'ing @paulcpederson

[geospatialem]

Research/design considerations will start in September, and development work will begin TBD in 2024.

[brittneytewks]

Removed figma changes label, will track progress for this work in monday.com

[LeviRemi]

Hello! I would like to request that the team considers a Multi-Column Sorting capability as part of the larger, advanced table functionality effort. I wanted to voice this early on, in case some of the design requirements may impact the early foundations of the "simple" sorting that is already planned.

The use-case is for larger tables where a user may want to sort by columns with duplicate values: e.g. sort by State, then City, then Street.

For UI/UX, I imagine "multiple-column-sorting" as an optional feature. You might consider sort-directions + enable-sort/disable-sort to be tied to the same icon in each column header. If multiple columns have been sort-activated, you could either assume the priority based on current column order, or you could render a number beside the icon to indicate what priority-order the sorting is occurring at.

I think this implementation by Shield UI is a good example: https://demos.shieldui.com/web/grid-general/sorting

[macandcheese]

Thanks @LeviRemi!

I think this implementation by Shield UI is a good example: https://demos.shieldui.com/web/grid-general/sorting

One design consideration I can think of - which many other libraries don't do a great job of - is indicating which is the "first sort" vs "second sort" - MUI does an ... okay job, but it is effective enough. Maybe this is something we can improve on:

[LeviRemi]

@macandcheese - I share the same feelings. It's a difficult design to pull off. The only alternative I could think of is to relegate all column sorting actions to a Calcite Dropdown that contains a list with two groups: sorted/non-sorted. Users could click non-sorted fields to move them into the sorted group. The sorted group could be rearranged via drag-n-drop, and each sorted field could have action buttons to either toggle the sort direction or disable sort on that field - moving it to the non-sorted group.

To me, this alternative feels like it would be intuitive while the dropdown is open, but lacking context once collapsed. Just food for thought. Thanks for considering!

[alisonailea]

Thanks @LeviRemi and @macandcheese! Another way to handle this would be to use something like a descriptive natural language header.

Table A, displaying 250 results, sorted by ColA then ColB.

[benelan]

Research summary

For the initial advanced table work, we'll start from scratch in a new component using Tabulator to implement the rich table features. The existing table-calcite component is split into cell/row sub-components, which could complicate the integration of advanced functionality. The current goal is to make the advanced table's default behavior align with calcite-table so it can be a potential replacement.

Requirements

Tabulator meets the requirements specified by the ArcGIS FeatureTable component developers. Note that not every point below will be fully implemented on our end. For example, we probably won't add builtin support for Arcade expressions or other ArcGIS specific functionality. However, will provide users with the means to implement out of scope features via access to Tabulator's customization options. A goal is to provide an example of how to implement any of the following requirements that aren't built into the component.

• Row virtualization ^1
  • lazy loading of rows and associated data (500k+; no upper limit?)
• Column virtualization ^2
  • Similar to rows; support for 100? 200+ columns
• Ability to select multiple rows (or turn off selection entirely) ^3
  • (optional; can be custom) checkboxes in a special (pinned?) selection column
• Ability to sort columns ^4
  • Sort by single OR multiple columns in ascending/descending order, in a given priority
  • e.g. sort by "last name" in ascending order then "first name" in ascending order
  • NOTE: typically up to the data source to sort data at request/render time
• Dynamic/custom cell content (determined at render time ^5a)
  • Examples:
  • Format raw values from the data source (e.g. unix date strings to "September 10th, 2024") ^5b
  • Create components based on cell value or column type (e.g. calcite-dropdown, calcite-action, calcite-icon etc) ^5c
  • HTML elements (divs and spans containing user managed content) ^5d
  • Execute async arcade expressions on first render or get cached values to display ^5e
  • Header and body cells
  • Footer cells not required
  • Note: sorting is still based on "raw" data values or disabled if applicable
• Ability to hide and show columns after creation (can be via custom menu) ^6
• Custom column widths ^7a and resizing columns via mouse/pointer in the UI ^7b
• Reorder columns via drag-and-drop in the UI ^8
• Support for nested/group columns ^9
  • Group columns do not need to be sortable
• Ability to scroll ^10a to a specific row by index ^10b
• Ability to temporarily filter the table by specific objectIds (can be tied to data store) ^11
• Ability to conditionally style individual cells or rows ^12
  • e.g. background color of "highlighted" columns, or specific rows
• Mouse/keyboard interaction events ^13
  • e.g. click, dbl-click, pointer-over, pointer-out, keydown
  • Ability to know which cell/column/row is being targeted
• Ability to "freeze" or "pin" columns to the left or right edge of the table (always visible) ^14
• Editing support for cell content ^15a
  • Not immediately required as long as "Dynamic/custom cell content" and "cell events" are supported

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[driskull]

Since it seems like the advanced tables include pagination, I wonder if we would use our own pagination component in place of them or align our pagination to component to work and feel like whatever table component we use.

Some of the other things like menus, popovers, alerts we just would use our own components for.

[driskull]

@benelan do you know if its possible to sort or resize columns using a keyboard? Wondering what the accessibility is for some of the functionality.

[benelan]

It is possible for sort, here is a demo. I'm not sure about resizing columns, it might require dragging with the mouse.

Edit: I don't think it's possible to focus the sort arrows in the column headers via the keyboard. There may be a way around it by putting html content like a calcite-action in the header instead and doing programmatic sort when clicking or pressing enter

[benelan]

Since it seems like the advanced tables include pagination, I wonder if we would use our own pagination component in place of them or align our pagination to component to work and feel like whatever table component we use.

Some of the other things like menus, popovers, alerts we just would use our own components for.

Yeah I think it depends on how different the behaviors are, but it shouldn't be too hard to use calcite-pagination instead.