Data Table

DESIGN Complete BETA VERSION RELEASEd

Display large sets of tabular data in a sortable, and filterable table.

Contributors

@Adam Butterworth (Deactivated) @Jeff Witt (Deactivated)@Ange Romanska (Deactivated)@Lael Birch (Deactivated)@Adam Stankiewicz

Slack channel

https://edx-internal.slack.com/archives/C01DR3NNHPV

Paragon Jira ticket

Alpha version: https://openedx.atlassian.net/browse/PAR-122

v1.0: https://openedx.atlassian.net/browse/PAR-269

v1.x:

Other Jira tickets

Design resources

Technical docs

https://edx.github.io/paragon/table/datatable


Design spec

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=10469%3A38059

With filters in the data control bar

 

Composition (DataTableFrame)

Sub components

Table

TableHeaderRow

TableHeaderRow Subcomponents

TableRow

TableRow Subcomponents

DataControlBar

 

DisplayControlBar


Meeting notes

Jan 12, 2021 Table Review!

Present: @Lael Birch (Deactivated) @Adam Stankiewicz @Adam Butterworth (Deactivated) @Adrienne Bolger (Deactivated)

Purpose: What’s left to merge this into Paragon?

  • Backend sorting is client side. → Server side sorting should be added in v1.0 the alpha.

  • Multiple actions in a row are possible (fully customizable via columns). No need to bake in any constraints. Design will have guidelines

  • Filters (Adam S): can we get things in there other than text fields?

    • They can be made anything you want, but you will need to not use the table wrapper

    • Move forward on filters sidebar for v1.0. For bulk enrollment we’ll use publish before “1.0” and label this component as Alpha. Don’t expect TableWrapper will change very much.

    • Bulk enrollment is waiting on this, after that. Public explore catalog widget which will definitely need the sidebar. It will need to live on the marketing page. Another one is bulk revoke subscription management

  • Adrienne, expects Lael to not be the only one building this ongoing. Others will need to pick this us. TBD on who/when/how.

Release features:

Alpha

1.0

1.x Future

Alpha

1.0

1.x Future

Server side sorting
Prevent cell overflows (try Bootstrap-Responsive table feature)
Agree on Naming/file locations & implement
Add a empty table component that can be passed in and has a sensible default
Rename and move components as agreed
  • Filter sidebar

  • Fixing the footer

  • Better testing

  • Checkboxes to match design

  • Better documentation

  • Discovery for Column hiding on mobile (determine 1.0 or 1.1)

  • other mobile responsive behavior

 

 

 

Nov 16, 2020 Table spike review

Present: @Adam Butterworth (Deactivated) @Adam Stankiewicz @Lael Birch (Deactivated)

We looked at the table components created in the spike

Decisions

  1. Make components that default to server-side filtering and pagination
  2. Use css-only solutions for stripes on the table and for sticky columns
  3. Make components library agnostic, only table wrapper will depend on react-table

Action items:

@Lael Birch (Deactivated) will clean up what’s there and push it to a branch, make a WIP PR
Sometime before Nov 30, 2020@Adam Stankiewicz will try to use the library to create a table and provide PR feedback
After rebrand work is done @Lael Birch (Deactivated) will create a meeting to pair with @Adam Butterworth (Deactivated) on adding css

Nov 5, 2020 Enterprise UI meeting

Present: @Ange Romanska (Deactivated) @Brandon Cooley (Deactivated) @Lael Birch (Deactivated) @Ken Kehoe

We discussed how the enterprise time line is getting tight, and how it might be best to do an MVP of a table without filters if possible. After the spike and ticket creation, we’ll have a better idea of where to go with this.

Nov 3, 2020 Ticket creation

Present: @Adam Stankiewicz @Adam Butterworth (Deactivated) @Lael Birch (Deactivated)

Created Epic for table components
Decisions: Do a Table spike, making some components without styling and figure out styling so that we can have more educated decisions about how to use ReactTable.

Action Items:

@Lael Birch (Deactivated) will do table spike
@Lael Birch (Deactivated) will create a table branch on Paragon to merge tickets into as they get done and a WIP PR so we can look at them
After spike @Lael Birch (Deactivated) will schedule another meeting with @Adam Butterworth (Deactivated) and @Adam Stankiewicz to finalize tickets.

Oct 30, 2020 Sync

Present: @Ange Romanska (Deactivated) @Jeff Witt (Deactivated) @Brandon Cooley (Deactivated) @Adam Stankiewicz @Adam Butterworth (Deactivated) @Lael Birch (Deactivated)

Reviewed refined design, worked out loading states, discussed accessibility issues

Action Items:

@Brandon Cooley (Deactivated) will create a table working group and the design to @Ken Kehoe@Josephe Cassaro
@Lael Birch (Deactivated) will set up a meeting with @Adam Butterworth (Deactivated) for early in the week of Nov 2, 2020
@Adam Butterworth (Deactivated) will run things by Eugene and Gabe

Oct 27, 2020 Sync

Present: @Ange Romanska (Deactivated) @Brandon Cooley (Deactivated) @Adam Butterworth (Deactivated) @Adam Stankiewicz @Lael Birch (Deactivated)

Review of initial table design
Adam Butterworth presented an initial design and received feedback
Discussed adding a “table status” row that keeps the state of the table (rows selected, select all, etc.)

Action Items:

@Adam Butterworth (Deactivated) will create “Anatomy of a table” in Figma
@Brandon Cooley (Deactivated) will schedule a meeting on Thursday Oct 29, 2020

We will start making Paragon tickets after that meeting.

Oct 21, 2020 Sync

Present: @Adam Butterworth (Deactivated) @Brandon Cooley (Deactivated) @Lael Birch (Deactivated) @Adam Stankiewicz

Goal: come up with generalizable solution
Where we are:

  • We have sorting in the headers

  • Dates: Use component in Frontend-platform

  • Filtering (select, multi, text input)

  • “Table-level” Actions

  • Pagination (bottom and top)

  • Fixed left column: )

What we want:

  • Solution that isn’t (very) tied to a layout

  • Table-level actions

  • Row level actions

  • Responsive behavior: Today we scroll horizontally, could use cards or some combo.

  • Pagination (bottom and top)

  • Persistent location (query parameters so you can refresh!)

  • Row headers

    • sortable, static, NONE (for item view)

  • Rows (static, selectable, clickable)

    • Classic

    • Item (expandable) → Card

    • Needs some usage guidelines

  • Cell

    • Contraints (truncate ellipsis)

  • Top thing: You can. Name it Table filters, table actions, data control row

    • View: change what data you’re seeing. (by filtering or search)

      • indeterminate number of filters

    • Do: perform an action on the data we’re seeing

    • Select:

      • reflect to you selections or summary of atomic interaction on data seeing below.

      • reset selection, select all

      • bulk action

  • Loading states

    • skeleton

    • error

    • loading overlay on existing data

  • Number of results

Action Items

@Adam Butterworth (Deactivated) will do a rough UI and create a generic set of components (by EOD Oct 26, 2020
@Brandon Cooley (Deactivated) will schedule a meeting early next week

 

Oct 14, 2020 Sync

Reviewed 3rd party component library options.

  1. Agreement to leverage the UI agnostic (headless) react-table library. Our components will be designed to work seamlessly with react-table’s API.