Data Table
Installation
npm i datatables.net-bs5
- For use of data table we create own custom hook with the help of datatables.net-bs5
- The navigation path of this file are ../component/hook/useDatatable.js
- For the use of datatable hook you want appear in your component please follow the below example code
Data Table component
import useDataTable from "../../hooks/useDatatable";
const tableData = [
{
no: "1",
title: "Lorem Ipsum Dolor",
author: "Nick Allen",
description: "Lorem Ipsum Dolor Sit Amet, Consectetur Adip...",
created_date: "21 Jul, 2020",
},
{
no: "2",
title: "Lorem Ipsum Dolor",
author: "Hans Olo",
description: " Lorem Ipsum Dolor Sit Amet, Consectetur Adip...",
created_date: "12 Jun, 2020",
},
]
const tableRef = useRef(null);
useDataTable({
tableRef: tableRef,
columns: columns.current,
data: tableData,
});
const table = () => {
return(
<>
<div className="table-view table-responsive table-space">
<table
id="datatable"
ref={tableRef}
className="data-tables table custom-table movie_table"
data-toggle="data-table"
></table>
</div>
</>
)
}
Props
Prop is set the attriblute for the component.
Name | Detail |
---|---|
tableRef |
|
iscolumnfilter | The iscolumnfilter function is defined using useCallback to memoize the
function and
prevent unnecessary re-renders.The useEffect hook is used to create the DataTable
instance,
passing in the data, columns, and footerCallback options.
|
islanguagefilter | This code appears to be using jQuery and DataTables.js libraries to create a
multi-language
table. It defines a function multiLanguage that checks if a table element
with a
selected language based on a dropdown select input with the ID langSelector. |
iscolumnhidden | The column visibility plug-in for Buttons provides a set of buttons that can be used to easily give the end user the ability to set the visibility of columns. |