Docs
DataTable

DataTable

展示数据的智能表格组件

Version: v1.0
产品使用情况
流量
818.94 MB / 100 GB
存储空间
15.6 GB / 200 GB

自动安装

使用以下命令之一自动安装组件，根据你的包管理器选择：

npx tofu-ui-cli@latest add data-table

手动安装 (可选)

注意
如果你使用手动安装，将无法获取更新

如果你需要手动安装，请在项目目录中创建如下路径文件：

components/ui/tofu/data-table.tsx

然后复制此代码：

import React, { FC } from 'react';
import CircularProgress from './CircularProgress';
/**
 * TofuUI DataTable [数据专用]-智能表格
 * @author shuakami
 * @version 1.0.0
 * @copyright ByteFreeze&TofuUI
 */
 
interface DataTableProps {
    columns: Array<{ key: string; title: string }>;
    data: Array<Record<string, any>>;
    className?: string;
}
 
const DataTable: FC<DataTableProps> = ({ columns, data, className }) => {
    const renderCell = (item: any, key: string) => {
        if (typeof item === 'string' && item.includes('/')) {
            const [used, total] = item.split(' / ');
            const percentage = parseFloat(used) / parseFloat(total) * 100;
            return (
                <div className="flex items-center">
                    <CircularProgress
                        variant="determinate"
                        value={100}
                        size={15}
                        thickness={5}
                        style={{
                            color: 'rgba(102, 102, 102, 0.24)',
                            position: 'relative',
                            marginRight: '5px',
                            zIndex: 5,
                        }}
                    />
                    <CircularProgress
                        variant="determinate"
                        value={percentage}
                        size={15}
                        thickness={5}
                        style={{
                            color: '#0072F5',
                            position: 'absolute',
                            marginRight: '5px',
                            zIndex: 6,
                        }}
                    />
                    <span className="ml-2">{item}</span>
                </div>
            );
        }
        return item;
    };
 
    return (
        <div className={`overflow-x-auto ${className}`}>
            <div className="bg-white dark:bg-black rounded-xl border border-gray-200 dark:border-tofu-dark-table-ds/30"
                 style={{
                     minWidth: '300px',
                     padding: '0.3rem 0',
                     zIndex: 10
                 }}>
                <div className="flex justify-between px-3 py-2.5 text-sm !-mt-1" style={{margin: '4px 17px'}}>
                    {columns.map((column) => (
                        <span key={column.key}
                              className="flex-1 text-tofu-light-table-ds dark:text-tofu-dark-table-ds font-medium">
                            {column.title}
                        </span>
                    ))}
                </div>
                <div style={{height: '1px', backgroundColor: 'rgba(102, 102, 102, 0.24)', margin: '0 23px'}}/>
                {data.map((row, idx) => (
                    <div key={idx} className={`flex justify-between items-center text-sm cursor-pointer
                            ${idx % 2 === 0 ? 'bg-tofu-light-table-hang-1 dark:bg-tofu-dark-table-hang-1' : 'bg-tofu-light-table-hang-2 dark:bg-tofu-dark-table-hang-2'}
                            hover:bg-tofu-light-table-hover dark:hover:bg-tofu-dark-table-hover
                            text-black dark:text-white`}
                         style={{
                             padding: '0.44rem 0.725rem',
                             margin: '4px 17px',
                             borderRadius: '0.375rem'
                         }}>
                        {columns.map((column) => (
                            <span key={column.key} className="flex-1">
                                {renderCell(row[column.key], column.key)}
                            </span>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    );
};
 
export default DataTable;

导入组件

import DataTable from '@/components/ui/tofu/data-table';

使用组件

<DataTable
  columns={[{ key: 'name', title: 'Name' }, { key: 'status', title: 'Status' }]}
  data={[{ name: 'Example', status: 'Active' }, { name: 'Demo', status: 'Inactive' }]}
  className="my-custom-class"
/>

使用方法

在规定的data元素中采用 X Key / Y Key 来自动生成数据圆

import React from 'react';
import DataTable from '@/components/ui/tofu/data-table';
 
const DemoDataTable = () => {
    const columns = [
        { key: 'product', title: 'Product' },
        { key: 'usage', title: 'Usage' }
    ];
 
    const data = [
        { product: 'Fast Data Transfer', usage: '818.94 MB / 100 GB' },
        { product: 'Storage Space', usage: '15.6 GB / 200 GB' }
    ];
 
    return (
        <div>
            <DataTable columns={columns} data={data} />
        </div>
    );
};
 
export default DemoDataTable;

参数说明

参数名类型默认值描述
columnsArray<{ key: string; title: string }>必需定义表格列的配置，包括键和标题
dataArray<Record<string, any>>必需数据数组，每个元素是一个记录，键对应于列配置中的键
classNamestringoptional表格容器的附加CSS类名
circular-progressdropdown-menu