Data Table

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

Example:

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

Open interactive preview

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, 'showInfo': false }.
  • onClickRemove | function: A function specifying an action to take for rows removed from the data (defaults to an empty function). Default: onClickRemove() {}.
  • filters | array: undefined. Default: [].
  • showRemove | boolean: indicates whether to display checkboxes for rows to be removed. Default: false.
  • style | object: An object allowing for custom css styling. Defaults to an empty object. Default: {}.

results matching ""

    No results matching ""