Data Table

DESIGN Complete BETA VERSION RELEASEd

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

Design spec

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:

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:

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

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:

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:

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

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.