@sifatkabir/reactdatatable

React Data Table Component

A customizable react component with additional function.

Key Features

• Searching
• Sorting
• Pagination
• Customizable

Usage

import ReactDataTable, {ReactTableCheckBox} from '@sifatkabir/reactdatatable';
const columns = [
    { title: <ReactTableCheckBox name="test" checked={true}/>, key: 'userId' },
    {
      title: 'Firstname', render: (item) => {
        return (
          <b>{item.firstname}</b>
        )
      }, sort: true, key: 'firstname'
    },
    {
      title: 'Lastname', render: (item) => {
        return (
          <b>{item.lastname}</b>
        )
      }, sort: true, key: 'lastname'
    },
    { title: 'Country code', key: 'countrycode', sort: true }
  ];

  const data = [
    {
      "userId": "56615",
      "firstname": "Kaelyn",
      "lastname": "Hane",
      "countrycode": "CL"
    },
    {
      "userId": "66680",
      "firstname": "Jovani",
      "lastname": "Mosciski",
      "countrycode": "AT"
    },
    
  ];

  const option = {
    pagination: { perPage: 5 }
  };

  return (
      <ReactDataTable columns={columns} data={data} option={option} title="Users" theme="bootstrap" />
  );

use with remote source

const columns = [
    { title: 'ID', key: 'userId' },
    { title: 'firstname', key: 'firstname', sort: true },
    { title: 'lastname', key: 'lastname', sort: true },
    {
      title: 'friends', key: 'friends', render: (item) => {
        const li = item.friends.map((friend) => <li key={friend.id}>{friend.id}</li>);
        return (
          <ul>
            {li}
          </ul>
        );
      }
    }
  ];

const option = {
    ajax: {
      url: 'http://localhost:3001/',
      requestOption: {
        mode: 'cors', credentials: 'omit',
        headers: {
          'Content-Type': 'application/json'
        },
        referrerPolicy: 'no-referrer'
      }
    }
  }
  const data = [];
  return (
    <>
      <ReactDataTable columns={columns} data={data} option={option} />
    </>
  );

Props

Name	Type	Required	Default	Description
columns	array	yes		Please view columns section
data	array	no	[]	array of objects
option	object	no	default option object	Please view option section
title	string | component	no		Displayed on table caption
theme	string	no	default	Values: default | bootstap. When use with bootstrap please set theme to bootstrap
loader	component	no	<Loading /> component	Shows while table loads data.

columns Props

Name	Type	Required	Default	Description
title	string | component	yes		The name of the column. e.g. Firstname. You can also a valid react component.
key	string	no		key is required if you want to display data. This will map to data object key. e.g. if you have data like this [{"userId": "56615","firstname": "Kaelyn"}] and you want to display firstname then set key to firstname.
sort	boolean	no	false	Set to true if you want this column to be sortable
render	function(item)	no		Custom function to display cell data. The record of the row passed as parameter. Returned value displayed on table cell

option Props

Name	Type	Required	Default	Description
heading	boolean | object	no	enabled by default	div containing search element or dropdown containing number of entries per page before table. You can set {heading: false} to hide this element.
heading.className	string	no	table-header	CSS class for heading
table.title	string | JSX element	no		This value will showup in the caption of the table.
table.className	string	no	react-datatable	CSS class for the table
table.tableHeader	boolean | object	no	enabled by default	<thead> element of the table. You can set {table: {tableHeader: false}} to hide this element.
table.tableHeader.className	string	no		CSS class for <thead>
table.tableHeader.sortingIcon.asc	string | JSX element	no	\u2191	If that column has sorting enable then this icon will showup and will be highlighted it is in ascending order.
table.tableHeader.sortingIcon.desc	string | JSX element	no	\u2193	If that column has sorting enable then this icon will showup and will be highlighted it is in descending order.
pagination	boolean | object	no	enabled by default	You can set {pagination: false} to disable pagination
pagination.perPage	number	no	20	Number of items to be shown in a page
pagination.className	string	no	react-table-pagination	CSS class for <ul> element of the pagination.
pagination.pageItemClassName	string	no	react-table-page-item	CSS class for <li> items of the pagination.
pagination.anchorClassName	string	no	react-table-page-link	CSS class for <a> items or links for the pagination.
pagination.wrapperClassName	string	no		There is a wrapper <nav> element for the pagination. This will set the CSS class for that element.
pagination.lengthMenu.className	string	no		CSS class for per page dropdown.
pagination.lengthMenu.position	string	no	left	This determines in which side the per page dropdown will be displayed. By default it is left. You can set it to right to show this on right.
pagination.lengthMenu.menu	array	no	[5, 10, 15, 20]	Menu items for per page dropdown.
pagination.lengthMenu.wrapperClassName	string	no		CSS class for a wrapper <div> element
pagination.lengthMenu.labelClassName	string	no		CSS class for the label of the dropdown
pagination.lengthMenu.style	string	no	'{}'	Inline style for the dropdown.
search	boolean | object	no	enabled by default	You can disable search by setting search to false
search.position	string	no	right	This determines in whcih side the search box will show up. By default it is right. You can set it to left to show this on left side.
search.className	string	no		CSS class for the search box
search.notFoundText	string	no	Sorry, no record found with the search criteria	Text to display if there is no result with search criteria.
search.casesensitive	boolean	no	false	Set it true if you want to make search case-sensitive.
search.wrapperClassName	string	no		CSS class for a wrapper <div> element.
search.name	string	no	search	name attribute for the search input box.
search.searchLabel	string	no	Search	Label for the search box.
search.searchLabelClassName	string	no		CSS class for the search label.
search.style	string	no	'{}'	Inline style for search.
ajax.url	string	no		url for your remote request.
ajax.requestOption	object	no	{}	fetch API options. For details please visit MDN
ajax.dataKey	string	no	data	Key of response json which contains the data. Data should be an array of objects.
ajax.totalRecordKey	string	no	total	Key of the response json whcih contains total number of pages for pagination.

option example

Table

Change CSS class for table

{table: className: 'my-table'}

Pagination

Disable pagination

{pagination: false}

Changing class for pagination ul

{pagination: className: 'custom-class-name'}

Changing class for pagination li

{pagination: pageItemClassName: 'custom-class-name'}

Changing class for pagination a

{pagination: anchorClassName: 'custom-class-name'}

Changing class for pagination wrapper nav

{pagination: wrapperClassName: 'custom-class-name'}

Changing number of items to display per page

{pagination: perPage: 5}

Changing dropdown for number of items per page

{pagination: lengthMenu: menu: [10, 20, 30, 50]}

Search

Disable Search

{search: false}

Changing Not found text

{search: notFoundText: 'nothing found'}

Place search box to left

{search: position: 'left'}

Change label for search

{search: searchLabel: 'Find'}

Default option object

{
    heading: {
        enableHeading: true,
        title: '',
        className: 'table-header'
    },
    table: {
        className: 'react-datatable',
        tableHeader: {
            enableTableHeader: true,
            className: '',
            sortingIcon: {
                asc: '\u2191',
                desc: '\u2193'
            }
        },
        tableFooter: {
            enableTableFooter: false,
            className: ''
        },


    },
    pagination: {
        enablePagination: true,
        position: 'bottom',
        perPage: 20,
        className: 'react-table-pagination',
        pageItemClassName: 'react-table-page-item',
        anchorClassName: 'react-table-page-link',
        wrapperClassName: '',
        lengthMenu: {
            className: '',
            position: 'left',
            menu: [5, 10, 15, 20],
            wrapperClassName: '',
            labelClassName: '',
            style: '{}'
        }
    },
    search: {
        enableSearch: true,
        position: 'right',
        className: '',
        notFoundText: 'Sorry, no record found with the search criteria',
        casesensitive: false,
        wrapperClassName: '',
        name: 'search',
        searchLabel: 'Search',
        searchLabelClassName: '',
        style: '{}'
    },
    ajax: {
        url: '',
        requestOption: {},
        dataKey: 'data',
        totalRecordKey: 'total'
    },
    socket: {

    },
    remote: false