React DataTable Responsive

It's a datatable component on React. It comes with features like filtering, search, view/hide columns, export to excel file, printing, sorting, selectable rows, pagination, and responsible for mobile/tablet device. On top of the ability to put component, textbox, checkbox, button, img, ... in cells.

Features:

• filtering
• search
• view/hide columns
• export to excel file
• printing
• sorting
• selectable rows
• pagination
• responsible for mobile/tablet
• resizable columns
• component, textbox, checkbox, button, img, and ... in cells

Table of contents

• Install
• Usage
• API
  • ReactDataTable
  • Table Options
  • CSS Classes
• Customize Columns
  • Column
  • Column Options
• Opttions
• License

Install

npm i react-datatable-responsive

Usage

simple table

import ReactDataTable from 'react-datatable-responsive';
import { ColumnType } from 'react-datatable-responsive';

const columns: ColumnType[] = [
  { field: { title: 'title' }, label: 'Title' },
  { field: { title: 'price' }, label: 'Price' },
  { field: { title: 'category' }, label: 'Category' },
]

const data = [
  { title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", price: 109.95, category: "men's clothing"},
  { title: "Mens Casual Premium Slim Fit T-Shirts ", price: 22.3, category: "men's clothing"},
  { title: "Mens Cotton Jacket", price: 55.99, category: "men's clothing"},
]

export default function Example() {
  return (
    <ReactDataTable rows={data} columns={columns} />
  )
}

custemized columns

import ReactDataTable from 'react-datatable-responsive';
import { ColumnType } from 'react-datatable-responsive';

const columns: ColumnType[] = [
  { field: { title: 'id' }, label: 'ID', options: { display: false } },
  { field: { title: 'title' }, label: 'Title', options: { sort: true } },
  { field: { title: 'price' }, label: 'Price', options: { filter: false, sort: true } },
  { field: { title: 'category' }, label: 'Category', options: { search: false } },
]

const data = [
  { id:1, title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", price: 109.95, category: "men's clothing"},
  { id:2, title: "Mens Casual Premium Slim Fit T-Shirts ", price: 22.3, category: "men's clothing"},
  { id:3, title: "Mens Cotton Jacket", price: 55.99, category: "men's clothing"},
]

export default function Example(): React.JSX.Element {
  return (
    <ReactDataTable rows={data} columns={columns} />
  )
}

nested objects

import ReactDataTable from 'react-datatable-responsive';
import { ColumnType } from 'react-datatable-responsive';

const columns: ColumnType[] = [
  { field: { title: 'id' }, label: 'ID', options: { display: false } },
  { field: { title: 'firstName' }, label: 'First Name' },
  { field: { title: 'account.username' }, label: 'Username' },
  { field: { title: 'address.home.street' }, label: 'Home Street' },
]

const data = [
  { id:1, firstName:"Anna", account:{username:"annauser"}, address:{home:{street:"24"}}},
  { id:2, firstName:"Lena", account:{username:"lenauser"}, address:{home:{street:"24"}}},
]

export default function Example(): React.JSX.Element {
  return (
    <ReactDataTable rows={data} columns={columns} />
  )
}

API

ReactDataTable

The component accepts the following props:

|Name|Type|Description |:--:|:-----|:-----| |direction|lrt | rtl | inherit|Direction used to describe direction of table. |columns|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column. (This field is required) |rows|array|Rows used to describe table. Must be either an array containing objects of key/value pairs. (This field is required) |options|object|Options used to describe table.

Table Options

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |cells|object||User provided items in cells. Example |color|object||User provided colors to customized table. Example |download|boolean|true|Show/hide download icon from toolbar. Possible values:true: Button is visible and clickable.false: Button is not visible. |filter|boolean|true|Show/hide filter icon from toolbar. Possible values:true: Button is visiable and clickable.false: Button is not visible. |onRowClick|function||Callback function that triggers when a row is clicked. function(rowData: any) => void |onRowsDelete|function||Callback function that triggers when row(s) are deleted. function(rowsDeleted: any[]) => void |pagination|boolean|true|Show/hide pagination. |print|boolean|true|Show/hide print icon from toolbar. Possible values:true: Button is visiable and clickable.false: Button is not visible. |resizableColumns|boolean|true|Enable/disable resizable columns. |responsive|boolean|true|Enable/disable responsive table. |rowsPerPage|number|10|Number of rows allowed per page. |rowsPerPageOptions|array|[5,10,20,50,100]|Options to provide in pagination for number of rows a user can select. |search|boolean|true|Show/hide search icon from toolbar. Possible values:true: Button is visiable and clickable.false: Button is not visible. |searchPlaceholder|string||Search text placeholder. |selectableRowsHideCheckboxes|boolean|false|Hides the checkboxes that appear when selectableRows is set to "multiple" or "single". Can provide a more custom UX, especially when paired with selectableRowsOnClick. |textLabels|object||User provided labels to localize text. |viewColumns|boolean|true|Show/hide viewColumns icon from toolbar. Possible values:true: Button is visiable and clickable.false: Button is not visible.

CSS Classes

These class names are useful for styling with CSS. They are applied to the component.

|Name|Description |:--:|:-----| |rdtdatatable|Styles applied to the data table| |rdtmenu-main|Styles applied to the menu box| |rdtmenu-select|Styles applied to the select menu box| |rdtmenu-title|Styles applied to the caption table| |rdtfilter|Styles applied to the filter box| |rdtfilter__title|Styles applied to the title of the filter box| |rdtfilter-item|Styles applied to the filter items box| |rdtfilter-column|Styles applied to the columns select tag | |rdtfilter-column__option|Styles applied to options of the columns select tag| |rdtfilter-condition|Styles applied to the conditions select tag| |rdtfilter-condition__option|Styles applied to options of conditions select tag| |rdtfilter-item__text|Styles applied to the input on the filter box| |rdtfilter__add|Styles applied to the add button on the filter box| |rdtfilter-list|Styles applied to the filter list box| |rdtfilter-list__li|Styles applied to the filter list item| |rdtfilter-list__remove|Styles applied to the remove button on filter list item| |rdtsearch|Styles applied to the search box| |rdtsearch__input|Styles applied to the input on search box| |rdtsearch__close|Styles applied to the close button on search box| |rdtshowcolumn|Styles applied to the show column box| |rdtshowcolumn__title|Styles applied to the caption show column box| |rdtshowcolumn__li|Styles applied to the list columns on show column box| |rdtshowcolumn__label|Styles applied to the label list columns on show column box| |rdttable|Styles applied to the table| |rdttable-nodata|Styles applied to the no data alert| |rdttable-header__label|Styles applied to the header label| |rdtcell-input|Styles applied to the input in cells| |rdtcell-textarea|Styles applied to the textarea in cells| |rdtcell-image|Styles applied to the image in cells| |rdtcell-checkbox|Styles applied to the checkbox in cells| |rdtcell-text|Styles applied to the text in cells| |rdtcell-progress|Styles applied to the progress in cells| |rdtcell-select|Styles applied to the to select in cells| |rdtcell-select__option|Styles applied to options in select| |rdtcell-button|Styles applied to the button in cells| |rdtpagination|Styles applied to the pagination box| |rdtpagination-pages|Styles applied to the number pagination box| |rdtpagination-pages__no|Styles applied to the number pagination| |rdtpagination-pages__no--select|Styles applied to the current page no| |rdtpagination-per-page|Styles applied to the per page select|

Customize Columns

On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

const columns = [
 {
  name: "Name",
  options: {
   filter: true,
   sort: false,
   ...
  }
 },
 ...
];

Column:

|Name|Type|Description |:--:|:-----|:-----| |field|object|Title of column (This field is required) and function to handle cell event |label|string|Column Header Name (This field is required) |kind|input/textbox | input/date | input/datetime-local | input/number | input/file | input/password | textarea | button | image | boolean | select | progress | component,|kind of column |options|object|Options for customizing column |eventHandlerHeader|function|function to handle column event

Column Options:

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |component|function||Function that returns a React component. Used to display data within all table cells of a given column. Example |display|boolean|true|Display column in table. Possible values:true: Column is visible and toggleable via the View Columns popover in the Toolbar.false: Column is not visible but can be made visible via the View Columns popover in the Toolbar. Example |filter|boolean|true|Display column in filter list.Example |search|boolean|true|Exclude/include column from search results.Example |sort|boolean|false|Enable/disable sorting on column.Example

Options

Change default options

const defaultOptions {
  color: {
    color: '#000',
    backgroundColor: '#fff',
    borderColor: '#ddd'
  },
  download: true,
  filter: true,
  print: true,
  search: true,
  viewColumns: true,
  pagination: true,
  resizableColumns: true,
  responsive: true,
  rowsPerPage: 10,
  rowsPerPageOptions: [5, 10, 20, 50, 100],
  searchPlaceholder: '',
  selectableRowsHideCheckboxes: false,
  cells: {
    imageWidth: 60,
  },
  textLabels: {
    body: {
      title: '',
      noMatch: "Sorry, no data found",
      toolTip: "Sort",
    },
    ...
  }
}

License

The files included in this repository are licensed under the MIT license.