data-table-reactjs v0.2.33

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:

Actions

ReactDataTable Properties

Basic

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
  />
);