antd-super-table

Một custom hook siêu mạnh mẽ giúp bạn quản lý trạng thái của Ant Design Table (Pagination, Sorting, Filtering, Search với Debounce) một cách dễ dàng và hỗ trợ hệ thống Plugin (ví dụ: Inline Editing).

Cài đặt

Bạn có thể cài đặt thông qua npm hoặc yarn:

npm install antd-super-table
# hoặc
yarn add antd-super-table

Lưu ý: Thư viện yêu cầu cài đặt sẵn react và antd.

Tính năng nổi bật

• 🚀 Server-side Pagination, Sorting, Filtering: Tự động bind dữ liệu vào Antd Table.
• 🔍 Debounced Search: Input tìm kiếm có sẵn debounce.
• 🛡️ Race Condition Handler: Quản lý fetch an toàn, không lo sai lệch dữ liệu khi call API liên tục.
• 🔌 Hệ thống Plugin độc đáo: Cho phép mở rộng tính năng vô hạn (kèm sẵn plugin editable).
• 🦾 TypeScript 100%: Typing chặt chẽ, tối ưu trải nghiệm DX.

Hướng dẫn sử dụng cơ bản

1. Dùng useSuperTable cho Bảng dữ liệu cơ bản

import React from 'react';
import { Table, Input } from 'antd';
import { useSuperTable } from 'antd-super-table';

// Hàm mock call API
const fetchUsers = async (params) => {
  console.log("Fetching with:", params); // { page, pageSize, search, sortBy, order, filters }
  return {
    data: [{ id: 1, name: 'Nguyễn Văn A' }],
    total: 100,
  };
};

const App = () => {
  const { tableProps, searchProps, params, reload } = useSuperTable({
    fetcher: fetchUsers,
    initialState: { pageSize: 20 },
    debounceTime: 500 // mặc định 300ms
  });

  const columns = [
    { title: 'ID', dataIndex: 'id', sorter: true },
    { title: 'Tên', dataIndex: 'name' }
  ];

  return (
    <div style={{ padding: 24 }}>
      <Input.Search 
        {...searchProps} 
        placeholder="Tìm kiếm..." 
        style={{ width: 300, marginBottom: 16 }} 
      />
      <Table 
        {...tableProps} 
        rowKey="id" 
        columns={columns} 
      />
    </div>
  );
};

export default App;

2. Sử dụng Plugin editable (Chỉnh sửa trực tiếp trên bảng)

Hệ thống plugin cho phép bạn gắn thêm các logic phức tạp như inline-editing một cách gọn gàng.

import React, { useState } from 'react';
import { Table, Input, Button, Space } from 'antd';
import { useSuperTable, editable } from 'antd-super-table';

const App = () => {
  const table = useSuperTable({
    fetcher: fetchUsers,
    plugins: [
      editable({
        onSave: async (id, data) => {
          // Gọi API cập nhật user ở đây
          await api.updateUser(id, data);
        }
      })
    ]
  });

  const columns = [
    {
      title: 'Tên',
      dataIndex: 'name',
      render: (text, record) => {
        if (table.isEditing(record.id)) {
          return <Input defaultValue={text} onBlur={(e) => table.saveEdit(record.id, { name: e.target.value })} />;
        }
        return text;
      }
    },
    {
      title: 'Hành động',
      render: (_, record) => (
        <Space>
          {table.isEditing(record.id) ? (
            <Button onClick={() => table.cancelEdit()}>Hủy</Button>
          ) : (
            <Button onClick={() => table.startEdit(record.id)}>Sửa</Button>
          )}
        </Space>
      )
    }
  ];

  return (
    <Table 
      {...table.tableProps} 
      rowKey="id" 
      columns={columns} 
    />
  );
};

API Reference

useSuperTable(options)

Options:

• fetcher: (params: SuperTableState) => Promise<{ data: T[], total: number }> - Hàm async lấy dữ liệu.
• initialState: Thiết lập state ban đầu (page, pageSize, search...).
• plugins: Mảng các plugin functions.
• debounceTime: Thời gian trễ cho ô tìm kiếm (ms).

Return:

• tableProps: Object truyền trực tiếp vào component <Table {...tableProps} /> của Antd.
• searchProps: Object truyền trực tiếp vào ô Input/Search <Input.Search {...searchProps} />.
• reload(): Hàm gọi lại fetcher bằng params hiện tại.
• setParams(): Hàm set lại params (ví dụ: đổi page, filter tay).
• params: Trạng thái state hiện hành (page, pageSize, ...).
• data, loading: Trạng thái load dữ liệu.

(Và các hàm thuộc tính từ plugin nếu có, ví dụ startEdit, saveEdit,...)