Rohit Kalkur
rovolution
@Rovolutionary
Software Engineer
@
Problem
- Social Table's Event Dashboard is the first view customers see after logging in
- Old dashboard was legacy code built with Knockout.js / jQuery
- No pagination (all data rows created in DOM)
What Did We Want?
- Pagination
- Minimal amount of nodes in the DOM
- Filtering
- A clean, sensible code architecture
- A better design wouldn't hurt either!
Fixed Data Table!
- FixedDataTable can be used to show our list of events
- Consists of 3 types of components
- Table
- Column
- ColumnGroup
Fixed Data Table!
- Can be customized via props (which are well documented)
- Takes props for literally anything and everything
- width (required)
- height (required)
- rowsCount (required)
- column content
- scroll position
Fixed Data Table!
- The most important prop is rowGetter
- This is used by the component to retrieve the data at a given row
- dataKey property of Column is used to access the data for the cell from the row
Fixed Data Table!
data
{
"id": 0,
"name": "Bob",
"age": 10
}
{
"id": 1,
"name": "Jane",
"age": 20
}
<Table
rowHeight={50}
rowGetter={rowGetter}
rowsCount={data.length}
width={5000}
height={5000}>
<Column
label="Name"
width={3000}
dataKey={'name'}>
<Column
label="Age"
width={3000}
dataKey={'age'}>
</Table>
Name
Age
Bob
Jane
10
20
function rowGetter(rowIndex) {
return data[rowIndex];
}
Fixed Data Table!
- Easy to see how this works for static data set, but what about dynamic data (for ex: pagination) ?
- FixedDataTable examples all use custom data stores for handling data fetching logic
EventsStore
- Holds the list of events that the events table uses
- FixedDataTable's rowGetter prop is set to a method implemented directly on the store. For ex.
- rowGetter = EventsStore.getEventAt
-
User actions trigger methods on the store
- EventsStore.fetch()
- EventsStore.delete()
EventsStore
- EventStore is also an event emitter
- Whenever store's contents are updated via fetch(), delete(eventId), etc..., it updates its data and triggers an 'update' event
- events-table component is subscribed to 'update' event, and when an update occurs, it calls setState() and updates its events state data.
Code Architecture
EventsStore.js
events-table.jsx
'update'
EventsStore.fetch()
_updateEvents: function() {
this.setState({
events: EventsStore.getEvents()
});
}
componentWillMount: function() {
EventsStore.on('update', this._updateEvents);
}
EventsStore
- But what about pagination???
- Pagination logic can be also be handled by the store as well!
- For instance, let us say our user has 600 events, and we have a page size of 200
- Pass 600 in for the rowCount prop for Table.
- When getEventAt() is called via rowGetter, you can create whatever custom page retrieval logic you want!
EventsStore
- For example, if getEventAt() has been called for 75% of the data on the current page, then go ahead and optimistically fetch the next page!
EventsStore
- All data fetching/pagination logic happens in the store itself
- Stores become highly logical
- Facebook realized that people were implementing certain logic patterns repeatedly in stores (such as pagination), and created abstractions for these in their Relay framework
Conclusion
- FixedDataTable is an awesome component for creating customizable data tables in React
- Creating a separate data store for handling the data allows you to cleanly decouple data fetching/manipulation logic from display and leads to more understandable code!
- Griddle is a fixed data table alternative that is more fully featured
FixedDataTable
By Rohit Kalkur
FixedDataTable
My experiences using the FixedDataTable React component by Facebook
- 6,916