1.0.10 • Published 2 years ago

@sifatkabir/reactdatatable v1.0.10

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

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

NameTypeRequiredDefaultDescription
columnsarrayyesPlease view columns section
dataarrayno[]array of objects
optionobjectnodefault option objectPlease view option section
titlestring | componentnoDisplayed on table caption
themestringnodefaultValues: default | bootstap. When use with bootstrap please set theme to bootstrap
loadercomponentno<Loading /> componentShows while table loads data.

columns Props

NameTypeRequiredDefaultDescription
titlestring | componentyesThe name of the column. e.g. Firstname. You can also a valid react component.
keystringnokey 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.
sortbooleannofalseSet to true if you want this column to be sortable
renderfunction(item)noCustom function to display cell data. The record of the row passed as parameter. Returned value displayed on table cell

option Props

NameTypeRequiredDefaultDescription
headingboolean | objectnoenabled by defaultdiv containing search element or dropdown containing number of entries per page before table. You can set {heading: false} to hide this element.
heading.classNamestringnotable-headerCSS class for heading
table.titlestring | JSX elementnoThis value will showup in the caption of the table.
table.classNamestringnoreact-datatableCSS class for the table
table.tableHeaderboolean | objectnoenabled by default<thead> element of the table. You can set {table: {tableHeader: false}} to hide this element.
table.tableHeader.classNamestringnoCSS class for <thead>
table.tableHeader.sortingIcon.ascstring | JSX elementno\u2191If that column has sorting enable then this icon will showup and will be highlighted it is in ascending order.
table.tableHeader.sortingIcon.descstring | JSX elementno\u2193If that column has sorting enable then this icon will showup and will be highlighted it is in descending order.
paginationboolean | objectnoenabled by defaultYou can set {pagination: false} to disable pagination
pagination.perPagenumberno20Number of items to be shown in a page
pagination.classNamestringnoreact-table-paginationCSS class for <ul> element of the pagination.
pagination.pageItemClassNamestringnoreact-table-page-itemCSS class for <li> items of the pagination.
pagination.anchorClassNamestringnoreact-table-page-linkCSS class for <a> items or links for the pagination.
pagination.wrapperClassNamestringnoThere is a wrapper <nav> element for the pagination. This will set the CSS class for that element.
pagination.lengthMenu.classNamestringnoCSS class for per page dropdown.
pagination.lengthMenu.positionstringnoleftThis 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.menuarrayno[5, 10, 15, 20]Menu items for per page dropdown.
pagination.lengthMenu.wrapperClassNamestringnoCSS class for a wrapper <div> element
pagination.lengthMenu.labelClassNamestringnoCSS class for the label of the dropdown
pagination.lengthMenu.stylestringno'{}'Inline style for the dropdown.
searchboolean | objectnoenabled by defaultYou can disable search by setting search to false
search.positionstringnorightThis 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.classNamestringnoCSS class for the search box
search.notFoundTextstringnoSorry, no record found with the search criteriaText to display if there is no result with search criteria.
search.casesensitivebooleannofalseSet it true if you want to make search case-sensitive.
search.wrapperClassNamestringnoCSS class for a wrapper <div> element.
search.namestringnosearchname attribute for the search input box.
search.searchLabelstringnoSearchLabel for the search box.
search.searchLabelClassNamestringnoCSS class for the search label.
search.stylestringno'{}'Inline style for search.
ajax.urlstringnourl for your remote request.
ajax.requestOptionobjectno{}fetch API options. For details please visit MDN
ajax.dataKeystringnodataKey of response json which contains the data. Data should be an array of objects.
ajax.totalRecordKeystringnototalKey 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
1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago