Data Table

This package contains distribution files required to style DataTables library for jQuery with styling for Bootstrap5. For more details

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 src/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,
});

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> 
    </>  
)
}
Previous Next