Addons for the fixed-data-table-2
This package supplements Schrödinger's fixed-data-table-2 with higher order components that add on context data, filtering and sorting. The package is the results from an issue that added an example showing how to add pagination, context and filtering to the fixed-data-table-2.
Note: This package is in maintanance mode and looking for a new owner. I'm currently not using fdt2 and therefore not the best suited for actually maintaining the package.
Package content
The package exports three objects, a HOC
with the higher order components, a Data
that contains data specifics and PropTypes
.
The higher-order-components (HOC)
This object is for directly adding functionality to the tables. This can be either for a Table
or a Cell
component. The available methods are:
addDataCtxt
that adds data context to a table and thus allows more convenient access to the data structure that doesn't have to be passed down to each cell. Important: The data provided has to have certain functions such asgetSize
and for this to work, see description of the data structure below.addData2CellFromCtxt
that adds moves the data context into a regular property.addFilter
this allows adding a filtering property to the component that searches the data for matching elements. The standard matching is done using string comparisons but the function takes a secondfilter
argument that allows specifying any function that returns a boolean.addForm2Cell
this adds an input form to a cell that is convenient when you want to add to your header the filter input field.addSort
this adds sorting to the table. It is recommended that you do the actual sort in the back-end. If you have a short table and you want to force sorting all the elements directly then set the second argument tofalse
.addSort2Cell
this adds a sorting link component to a header cell.
Data context - example
To use the data context extend your table with the context HOC as below:
;; const CoreCell = rowIndex columnKey data ...other <Cell ...other> datacolumnKey </Cell>;const ContextCell = ;const DataTable = ; ... { return <DataTable rowHeight=50 headerHeight=50 height=500 width=500 data=data > <Column columnKey="id" width=250 header=<Cell>ID</Cell> cell=ContextCell /> <Column columnKey="name" width=250 header=<Cell>Name</Cell> cell=ContextCell /> </DataTable> ; }
The Data object
The data object contains:
DataListWrapper
a class that wraps around a data object with customgetObjectAt
,isTouched
, andgetSize
. It is a thin datalayer that has its own index that is set at creation. It can also set the parent data callback that can be useful when setting up pagination.SortTypes
contains the sort constants for ASC (ascending) and DESC (descending) sorting.getRowValue
this is simply a function that accesses the underlying row. Since immutable is a common data structure there is a need for allowing a customget()
method in the data object. This function checks if that is available and uses that function before trying standard[]
.
The data structure provided to this package should be wrapped in a class that provides the following interface:
getSize()
returns the number of rows.getObjectAt(index)
returns a row object at a certain index. The row object should either have aget(columnName)
function used for accessing the column or be just indexeable using the standard[columnName]
syntax.setCallback(callbackFunction)
is optional and is used together with paginated data. If you have data that will load later and want to trigger events when this happens then add those events using this function.runCallbacks()
also optional and simply runs each of the callbacks received.
The PropTypes object
The PropTypes provide property types as defined by react. It contains:
createWithProps
is a function that creates a proptype that has to contain certain properties. Useful for checking if the data object is correctly specified with thegetObjectAt
andgetSize
functions.BasicData
is a property type generate usingcreateWithProps(['getSize', 'getObjectAt', 'isTouched'])
.DataListWrapper
is a proprty type specific to theDataListWrapper
class.Filter
is a property type for filters. Checks that the filter property is an object oflength > 0
.