PublicTableList Component

A powerful and flexible table list component for React, built with Ant Design.

Features

• Easy to use and configure
• Support for pagination
• Customizable columns
• Loading state management
• Row selection and operations
• Support for data fetching via API

Installation

npm install public-table-list

Usage

import React from 'react';
import PublicTableList from 'public-table-list';
import { Button } from 'antd';

const App = () => {
  // 表格列配置
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Button onClick={() => handleDelete(record.id)}>Delete</Button>
      ),
    },
  ];

  // 获取数据的API函数
  const fetchData = async (params) => {
    // 这里是你的API调用逻辑
    const response = await fetch(`/api/data?page=${params.pageNum}&pageSize=${params.pageSize}`);
    const data = await response.json();
    return data;
  };

  // 删除数据的API函数
  const deleteData = async (id) => {
    // 这里是你的删除API调用逻辑
    const response = await fetch(`/api/data/${id}`, { method: 'DELETE' });
    return response.json();
  };

  return (
    <PublicTableList
      columns={columns}
      get={fetchData}
      deleteApi={deleteData}
      rowKey="id"
      showOrderNumber={true}
    />
  );
};

export default App;

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | className | string | - | Custom CSS class name | | query | object | - | Query parameters for data fetching | | columns | array | [] | Table columns configuration | | get | function | - | API function to fetch data | | rowKey | string | 'id' | Row key for table | | listKey | string | 'list' | Key for list data in response | | totalKey | string | 'total' | Key for total count in response | | successCode | string | '0' | Success code for API response | | successCodeKey | string | 'code' | Key for success code in response | | pageIndexKey | string | 'pageNum' | Key for page index in request | | pageSizeKey | string | 'pageSize' | Key for page size in request | | page | object | { pageNum: 1, pageSize: 10 } | Default page configuration | | pageInnerKey | string | - | Inner key for page configuration | | deleteApi | function | () => Promise.resolve({}) | API function to delete data | | dealDeleteRes | function | (res) => res | Function to handle delete response | | showOrderNumber | boolean | false | Whether to show order number | | innerKey | string | - | Inner key for data items | | orderColumn | object | {} | Configuration for order column | | tableLoadingChange | function | () => {} | Function to handle loading state change | | dealGetRes | function | (res) => res | Function to handle get data response | | pagination | object | {} | Pagination configuration | | hasPagination | boolean | true | Whether to show pagination |

License

MIT