New Component: Table (advanced functionality)

alisonailea commented 1 year ago

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.

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

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] commented 1 year ago

cc @ashetland, @yelenakreyndel, @SkyeSeitz

forrestlin2020 commented 1 year ago

Where is Advanced DataGrid?

geospatialem commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

brittneytewks commented 9 months ago

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

LeviRemi commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

@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 commented 8 months ago

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.

Esri / calcite-design-system