Data Table

A component rendering data in a tabular display. Built on top of react-table.

Options

• data | (array|object) (required): A data object or array to be viewed. If it is an object, the keys correspond to column values while an array will expect an array of objects with a named field corresponding to each column. Default: none.
• dataInfo | object: object with info string array describing the data set, the name of the dataset, an object of variables with keys corresponding to variable names and values to variable descriptions, an a showOnStartup boolean controlling whether to display the info modal on startup. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: controls whether columns for which no info exist have a button which when clicked calls the onColumnDelete callback function. Default: false.
• undeletableVars | array<string>: array of variable names of columns which may not be deleted. Default: [].
• filterable | boolean: controls whether columns are filterable. Default: true.
• editable | array: array of names for columns that shall be editable. Default: [].
• getTrProps | function: callback function executed for each row to customize its styling (passed table state, row info, column, and the table instance). Default: none.
• onColumnDrag | function: function invoked when a column has been dragged to a different position. Default: onColumnDrag() {}.
• onColumnDelete | function: function invoked with the name of a column when the respective delete button for a column is clicked. Default: onColumnDelete() {}.
• onColumnNameChange | function: function invoked when a column has been renamed (called with the old name as first and new name as second argument). Default: onColumnNameChange() {}.
• onClickRemove | function: function specifying an action to take for rows removed from the data (defaults to an empty function). Default: onClickRemove() {}.
• onEdit | function: function invoked with the updated data set after the value of a cell was changed by the user (only applies when table is editable). Default: onEdit() {}.
• onTutorialCompletion | function: function invoked when user has completed the data table tutorial. Default: onTutorialCompletion() {}.
• filters | array: array of filters. Default: [].
• onFilteredChange | function: function invoked with the current filters after data has been filtered by user. Default: onFilteredChange() {}.
• showRemove | boolean: indicates whether to display checkboxes for rows to be removed. Default: false.
• showIdColumn | boolean: controls whether to show an ID column. Default: true.
• disableDownload | boolean: whether to hide the button to download the data as a CSV or JSON file. Default: false.
• className | string: class name. Default: ''.
• style | object: An object allowing for custom css styling. Defaults to an empty object. Default: {}.

Examples

Live Editor

<DataTable showRemove onClickRemove={( data ) => { console.log(data); }} data={{ firstName: [ 'Hans', 'Lotti', 'Fritz' ], lastName: [ 'Bauer', 'Müller', 'Schultz' ], age: [ 37, 55, 62 ] }} style={{ width: 600 }} />

<DataTable
    showRemove
    onClickRemove={( data ) => { console.log(data); }}
    data={{ 
        firstName: [ 'Hans', 'Lotti', 'Fritz' ], 
        lastName: [ 'Bauer', 'Müller', 'Schultz' ],
        age: [ 37, 55, 62 ]
    }}
    style={{ width: 600 }}
/>

Result

ReferenceError: Provider is not defined