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]

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

[github-actions]

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.