Data Table

DESIGN IN PROGRESS IMPLEMENTATION IN PROGRESS

We need a set of components that will help us produce interfaces for interacting with large lists of data more quickly and consistently. Our current table is simplistic and we have been creating one-off solutions each time.

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

Known use cases

We have many table or list heavy administration screens in our Enterprise products. A subset of them can be found documented in Miro.

Similar components that exist in the wild

N/A

Jira Epic(s)

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

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

v1.x: https://openedx.atlassian.net/browse/PAR-261

Stakeholders

Design

12 Jan 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:

16 Nov 2020 Table spike review

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

We looked at the table components created in the spike

Decisions

• Make components that default to server-side filtering and pagination
• Use css-only solutions for stripes on the table and for sticky columns
• 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 30 Nov 2020Adam 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

05 Nov 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.

03 Nov 2020 Ticket creation

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

Created Epic for table components https://openedx.atlassian.net/browse/PAR-122
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.

30 Oct 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 KehoeJoe Cassaro
• Lael Birch (Deactivated) will set up a meeting with Adam Butterworth (Deactivated) for early in the week of 02 Nov 2020
• Adam Butterworth (Deactivated) will run things by Eugene and Gabe

27 Oct 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 29 Oct 2020

We will start making Paragon tickets after that meeting.

21 Oct 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 26 Oct 2020
• Brandon Cooley (Deactivated) will schedule a meeting early next week

14 Oct 2020 Sync

Reviewed 3rd party component library options.

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