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 ../component/Datatable.tsx
    • For the use of datatable hook you want appear in your component please follow the below example code
    Data Table component
    const DataTable = dynamic(() => import('@/components/DataTable'), { ssr: false });;

const table = () => {
const TopSellerTable = {
data: [
{
rank: "#179",
profiles: { name: "Marie Clark", username: "@mclark" },
revenue: "$8,015",
sales: "752",
},
{
rank: "#118",
profiles: { name: "James Mason", username: "@jamesM" },
revenue: "$13,989",
sales: "875",
},
{
rank: "#148",
profiles: { name: "Elon Musk", username: "@musk" },
revenue: "$14,437",
sales: "1548",
},
{
rank: "#101",
profiles: { name: "Jacob Jones", username: "@jones" },
revenue: '<span className="text-black">$25,916</span>',
sales: "4,863",
},
],
columns: [
{
title: "Rank",
data: "rank",
render: function (data: any) { return '<strong>' + data + '</strong>' }
},
{
title: "Profiles",
data: "profiles",
render: function (data: any, type: any) {
return (
"<h6>" +
data.name +
'</h6><p class="mb-0">' +
data.username +
"</p>"
);
},
},
{ title: "Revenue", data: "revenue" },
{ title: "Sales", data: "sales" },
],
};
return (
        <>
            <div className="mt-4 table-responsive  ">
                <DataTable
                    data={TopSellerTable.data}
                    columns={TopSellerTable.columns}
                    iscolumnfilter='data-table-column-filter'
                />
            </div>
        </>  
    )
}
    Props

    Prop is set the attriblute for the component.

    Name Detail
    tableRef

    tableRefis a prop in the Bootstrap 5 DataTable component that allows you to pass a ref to the underlyingtable element. This can be useful if you need to access the table element's properties or methods directly.
    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.
    Previous Next