twdtable

📊 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: "[e-mail]" },
      { id: 2, name: "Jane Doe", email: "[e-mail]" },
    ],
  };

  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!