data table reactjs Key Features

• Declarative Configuration
• Built-in and configurable:
  • Sorting
  • Filtering
  • Download
  • Pagination
• Themeable/Customizable
• Responsive

Installation

Data table react has only react as dependancy no other third party library is used.

API and Usage

Columns

Nothing new here - we are using an array of object literals and properties to describe the columns:

| Property | Type | Required | Example | | ---------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | string | yes | the display name of our Column e.g. 'Name' | | selector | string | yes | a data set unique property in dot notation. e.g. property1.nested1 . A selector is required anytime you want to display data but can be ommitted if your column does not require showing data (e.g. an actions column) | | sortable | bool | no | if the column is sortable. columns will be sorted using basic sor functions and will have ability to sort string, date, number | | filterable | bool | no | if the column is filterable. Rows will be filter by converting data to string type |

Actions

| Property | Type | Required | Default | Description | | --------- | -------- | -------- | ------- | ------------------------------------------------------------------------------ | | key | string | yes | | key to should be unique | | label | string | no | | label for the action | | handler | function | yes | | Call back to be called after action click which should accept index , item | | className | string | no | | class for the action |

ReactDataTable Properties

Basic

| Property | Type | Required | Default | Description | | --------------------- | ------------------- | -------- | ------- | -------------------------------------------------------------------- | | title | string | no | | The Title displayed in the Table Header | | columns | array | yes | [] | The column configuration | | isLoading | bool | no | | Show a loader | | loadingComponent | Component or string | no | | custom component to display | | list | array | yes | [] | List of records containing properties with name of column selector | | actions | array | no | [] | The action configuration | | pagination | bool | no | false | to enable pagination | | showSerialNumber | bool | no | false | to show the serial number as first column of table | | showDownloadOption | bool | no | false | to show download file option | | defaultValForEmpty | string | no | '-' | Val to display when there is no value for any column | | initiallyVisibleCol | array | no | all | Columns to be diplayed intitally | | hideOptionToSelectCol | bool | no | false | Hide option to select columns |

Class Names to modify styles of table

the class names are self explantory and can be used to customize the table view containerClass | titleContainerClass | titleClass | downloadDropDownContainerClass | downloadDropDownClass | tableClass | tableWapperClass | headerRowClass | headerCellClass | headerIconContainerClass | filterInputContainerClass | filterInputFieldClass | filterInputApplyClass | tableBodyClassName | tableRowClass | tableCellClass | actionsClass | tableFooterClass | pageSizeDropDownContainerClass | pageSizeDropDownClass | pageNumberContainerClass | pageNumberCellClass | activePageCellClass | react-data-table-multi-select-dropdown | react-data-table-action-cell | react-data-table-action-cell-item All classes can be passed to table

Usage example

import ReactDataTable from 'data-table-reactjs';
const columns = [
  {
    name: 'column 1',
    selector: 'column1',
  },
  {
    name: 'column 2',
    selector: 'column2',
  },
];
const actions = [
  {
    key: 'viewDetails',
    handler: (index, item) => {
      console.log(index, item);
    },
    label: 'View record',
  },
];
const list = [
  {
    column1: 'Value 1',
    column2: 'value 2',
  },
  {
    column1: 'Value 3',
    column2: 'value 4',
  },
  {
    column1: 'Value 5',
    column2: 'value 6',
  },
];
const MyComponent = () => (
  <ReactDataTable
    title="Title of the table"
    columns={columns}
    list={list}
    actions={actions}
    showSerialNumber
  />
);