customdatatabledev
v1.0.7
Published
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.
Downloads
6
Maintainers
Readme
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,
}