📊 TwdTable DataTable Module

A powerful and customizable React data table component built with Vite, TypeScript, and Tailwind CSS.

✨ Features

• 📌 Fully customizable
• 📊 Supports sorting, filtering, and pagination
• 🎨 Tailwind CSS support for easy styling
• ⚡ Optimized for performance

🚀 Installation

Install the package via npm:

npm install twdtable

Or with yarn:

yarn add twdtable

🚀 Usage

import { TwdTable } from "twdtable";
import "twdtable/dist/twdtable.css";
const App = () => {
  const data = {
    columns: [
      {
        field: "id",
        label: "ID",
        enableSorting: false, // Disable sorting
        enableHiding: false, // Disable hiding
        enableSelect: true, // Enable Row Selection
      },
      {
        field: "name",
        label: "Name",
        className: {
	 row_txt: "text-red-500"
	}, // Each columns have support className
      },
      {
        field: "email",
        label: "Email",
      },
      {
        label: "actions",
        actions: [
          {
            label: "Edit",
            onClick: (id, doc) => {},
          },
          {
            label: "Delete",
            split: true,
            onClick: (id, doc) => {},
            dialog: {
              status: true,
              title: "Delete Item",
              description: "Are you sure you want to delete this item? This action cannot be undone.",
              button: "Confirm Delete",
            },
          },
        ],
      },
    ],
    rows: [
      { id: 1, name: "John Doe", email: "[email protected]" },
      { id: 2, name: "Jane Doe", email: "[email protected]" },
    ],
  };

  return (
    <>
      <TwdTable
        data={data}
        selectable
        fullPagination
        handlePageLimitChange={(page, limit) => {}}
        handleFilterChange={(filter, page, limit) => {}}
        columnCallBack={(type, data) => {}}
        flOption={{ export: true, delete: true, send: true }}
        defaultLimit={10}
        selectOptions={{
          Age: [
            { label: "20", value: "20", _id: "1" },
            { label: "30", value: "30", _id: "2" },
          ],
          Class: [
            { label: "10th", value: "10", _id: "1" },
            { label: "12th", value: "12", _id: "2" },
          ],
        }}
	classNames={{
	 	pgn: "bg-red-500 text-blue-500"
	}}
      />
    </>
  );
};

export default App;

🔧 Props

| Props | Type | Description | | --------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | | state | { filter: object, setFilter: (e: Record<string, any>) => void;} | Table state, including filter values and update function | | flOption | { export: boolean, delete: boolean, send: boolean} | Options for exporting, deleting, and seding data | | limits | number[] | Available page limit options | | defaultLimit | number | Default page limit | | api | boolean | enable API-based data loading, its true by default | | striped | boolean | add striped row styling | | selectable | boolean | enable row selection | | fullPagination | boolean | Show full pagination controls | | columnCallBack | (type: string, data: {field: string, sort: string} or {_id: string, data: Record<any, any>}) => void;}) | Callback function for column and filter interactions | | handlePageLimitChange | (page: number, limit: number) => void; | Callback function for page and limit changing | | handleFilterChange | (filter: any, page: number, limit: number) => void; | CallBack function for filtering changes | | sm | boolean | Enable small table style | | loading | boolean | show loading indicator | | cancelLoading | boolean | Cancel loading indicator | | count | number | total data count | | searchField | string | If api is false use this to filter inputs | | selectOptions | Array<Record<string, any>> | Options for filter | | classNames | Record<string, any> | style | | data | { columns: Columns[], rows: Array<Record<string, any>>} | | | pagination | boolean | hide paginatio section | | filterOptions | boolean | hide filter options in header | | header | boolean | hide header section | | serialNumber | boolean | | | filterPlaceholder | string | you can change filter input placeholder value |

Note: The handlePageLimitChange and handleFilterChange functions are automatically invoked when the table data is accessed ( similar to how useEffect behaves ). therefore, you don't need to mannually call these functions using useEffect.

Note: When header or filterOptions is set to false. handleFilterChange is not invoked automatically. You must use useEffect to manually load the data.

Similarly, when pagination set to false. handlePageLimitChange is not triggered automatically.

Columns[]

{
	field: string;
	label: string;

	className?: Record<string, any>;

	enableSorting?: boolean;
	enableHiding?: boolean;
	enableSelect?: boolean;

	type?: "date";

	actions?: {
		label: string;
		show: boolean, // When set to true, the action labels will be displayed in the table row header.
		dropdown: boolean,
		icon?: element, // When dropdown is set to true, provide the icons to be displayed in the column data.
		onClick: (id, doc) => void;
		split?: boolean;
		dialog?: {
			status: boolean;
			title: string;
			description: string;
			button: string;
		};
	}[];
}

🎨 Customization

| classNames | Description | | :------------: | :---------------------------------------- | | dio_box | action dialog box | | dio_title | action dialog box titile | | dio_desc | action dialog box description | | dio_btn | action dialog box button | | row_ck | header column check box styling | | row_txt | header column text styling | | fl_option | filter option styling | | fl_on_menu | filter option dropmenu styling | | fl_on_item | filter option dropmenu item styling | | fl_spt | filter option dropmenu splitter styling | | fl_mn_input | filter input styling | | pgn | pagination style | | pgn_txt | pagination text styling | | pgn_menu | pagination limit menu styling | | pgn_item | pagination limit menu item styling | | act_menu | column hiding action menu styling | | act_item | column hiding action menu item styling | | act_btn | column hiding action button styling | | fl_input | columns filter input styling | | fl_act_btn | column filter button styling | | fl_act_rbtn | columns filter reset button styling | | clm_txt | column header text styling | | clm_menu | column header menu styling | | clm_item | column header menu item styling | | clm_icon | column header menu item icon styling | | tableHeader | table header styling | | tableBody | table body styling | | fl_on_menu_clr | filter option dropmenu clear btn styling |

🚀 Enjoy using TwdTable! If you like this project, consider giving it a ⭐ on GitHub!