customdatatabledev

customdatatabledev

Description

Custom Datatable is a versatile React component that provides powerful functionality for managing and displaying tabular data. It includes features such as searching, sorting, pagination, and the ability to use custom cells for enhanced customization.

Installation

You can install the package via npm:

npm i customdatatabledev
npm i bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';


  useEffect(() => {
    require('bootstrap/dist/js/bootstrap.bundle.min.js');
  }, []);

Usage

  const tableProps: PropsType = {
    Pagination: 'false',
    SearchFilter: 'false',
    classes: '',
    recordPerPageProp: 50,
    id: '1',
    useref: null,
    printOption: true,
    pdfOption: false,
    isResponsive: true,
    TableBody: tableBody,
    TableHead: storeDataHead,
    tableClasses: 'table-dark table-hover table-striped',//you can do the changes as needed these are bootstrap classes
    theadClasses: 'table-primary',//you can do the changes as needed these are bootstrap classes
    tbodyClasses: 'table-success',//you can do the changes as needed these are bootstrap classes
  };

<CustomDatatable {...tableProps} />

Features

Searching: Easily search through the table data.
Sorting: Click on column headers to sort data in ascending or descending order.
Pagination: Navigate through pages of data.
Custom Cells: Use custom cells to display data in a way that suits your application.

Props

Pagination: "true" or "false" - Enable or disable pagination.
TableBody: Array of objects - Your tabular data.
TableHead: Array of objects - Configuration for table headers.
SearchFilter: "true" or "false" - Enable or disable the search filter.
classes: String - Custom CSS classes for styling.
recordPerPageProp: Number or "all" - Number of records per page or show all records.
id: String - Identifier for the datatable.
useref: Ref object - Reference to the datatable.
printOption: Boolean - Enable or disable printing option.
pdfOption: Boolean - Enable or disable exporting to PDF.
isResponsive: Boolean - Enable or disable responsive design.
tableClasses: you can do the changes as needed these are bootstrap classes
theadClasses: you can do the changes as needed these are bootstrap classes
tbodyClasses: you can do the changes as needed these are bootstrap classes

TableHead

const TableHead = [
{ prop: 'key1', title: 'Title1' },
{ prop: 'key2', title: 'Title2' },
{ prop: 'key3', title: 'Title3' },
...
]

Special Case

When you want to add some kind of inputs fields, call to actions,etc. you can do it like this.

const TableHead = [
{ prop: 'key1', title: 'Title1' },
{
      prop: 'customCell',
      title: 'Description',
      cell: (row: any): JSX.Element | null => {
        return (
          <>
            <span
              className="d-inline-block text-truncate"
              style={{ maxWidth: '300px' }}
            >
              {row?.storeDesc}
            </span>
          </>
        );
      },
    },
...
]

Here row will return complete object for that particular row. For example: tablebody -->

[{
  key1:value11,
  key2:value21,
  key3:value31,
},{
  key1:value12,
  key2:value22,
  key3:value32,
},{
  key1:value13,
  key2:value23,
  key3:value33,
}]

possible values for 1st row will be:

{
  key1:value11,
  key2:value21,
  key3:value31,
}