DataTable Component

A comprehensive data table component with sorting, filtering, pagination, and responsive design.

Live Preview

Name	Email	Role	Status	Created At
John Doe	john@example.com	ADMIN	Active	2025-11-03
Alice Chen	alice@example.com	USER	Active	2025-10-26
Brian Wang	brian@example.com	MODERATOR	Inactive	2025-10-18
Cynthia Lin	cynthia@example.com	USER	Active	2025-10-11
Cynthia Lin	cynthia@example.com	USER	Active	2025-10-11
Total			5/6 Active	6 rows

每頁顯示筆

共 6 筆資料

跳至頁

Usage

import { DataTable } from '@featherstudio/react-daisyui-kit';

export default function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', sortable: true },
    { key: 'email', title: 'Email', dataIndex: 'email', filterable: true },
  ];

  const data = [
    { name: 'John', email: 'john@example.com' },
  ];

  return (
    <DataTable
      columns={columns}
      dataSource={data}
      pagination={{
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
      }}
    />
  );
}

const summary = {
  show: true,
  fixed: true,
  columns: [
    { key: 'name', type: 'custom', render: () => <strong>Total</strong> },
    {
      key: 'isActive',
      type: 'custom',
      render: (data) =>
        data.filter((item) => item.isActive).length + '/' + data.length + ' Active'
    },
    { key: 'createdAt', type: 'count', suffix: ' rows' },
  ],
};

<DataTable
  columns={columns}
  dataSource={data}
  summary={summary}
  pagination={{ current: 1, pageSize: 10 }}
/>;

Features

Sorting

Enable sorting per column with sortable: true.

Pagination

Built-in page size switcher and quick jumper via pagination config.

Filtering

Per-column filtering via filterable: true.

Summary Row

Supports sum, avg, count and custom summary renderers.

Props

Prop	Type	Default	Description
columns	Column[]	-	Column configuration
dataSource	Record<string, unknown>[]	-	Table data
pagination	PaginationConfig \| false	{ current: 1, pageSize: 10, ... }	Pagination behavior configuration
summary	SummaryConfig	undefined	Show summary row with sum/avg/count/custom
emptyText	string	暫無資料	Text displayed when there is no data

← Back to Components