@madulinux/react-datatable NPM

@madulinux/react-datatable

Reusable DataTable React component with sorting, paging, filtering, async fetch, and custom styling. Perfect for dynamic tables, admin panels, and filter integration.

Dokumentasi Indonesia

✨ Features

Column sorting (click header)
Pagination & perPage
Dynamic filtering (filterValues prop)
Async data fetch (API ready)
Custom cell/action rendering
Full styling via className props
TypeScript support

🚀 Installation

npm install @madulinux/react-datatable

🔥 Basic Usage

import DataTable from '@madulinux/react-datatable';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email' },
  { key: 'status', label: 'Status', render: row => row.status ? 'Active' : 'Inactive' }
];

const fetchData = async ({ page, perPage, search }) => {
  const res = await fetch(`/api/users?page=${page}&perPage=${perPage}&search=${search}`);
  const data = await res.json();
  return { data: data.items, total: data.total };
};

<DataTable
  columns={columns}
  fetchData={fetchData}
  defaultPerPage={10}
/>

🧩 API & Props

Prop	Type	Description
columns	Array<{ key, label, sortable?, render? }>	Column definitions and cell rendering
fetchData	function(params) => Promise<{data,total}>	Async data fetch (API, etc)
filterValues	object	Additional filters (optional)
defaultPerPage	number	Items per page (default: 10)
actions	function(row) => ReactNode	Custom action rendering per row
className	string	Styling root container
tableClassName	string	Styling element
headerClassName	string	Styling all
rowClassName	string	Styling all
cellClassName	string	Styling all

🎨 Custom Styling

You can fully customize the appearance using className props:

<DataTable
  columns={columns}
  fetchData={fetchData}
  className="rounded-lg shadow bg-white"
  tableClassName="border"
  headerClassName="bg-gray-100 text-gray-700"
  rowClassName="hover:bg-gray-50"
  cellClassName="px-4 py-2 border-b"
/>