---
title: 基础表格
order: 1
---

本 Demo 演示一行文字的用法。

```jsx
import React, { Component, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { YwTable, AddIcon } from '@ywfe/yw-design';
import { Button } from 'antd';
import 'antd/dist/antd.css';
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    component: 'IndexCol',
    width: 50,
  },
  {
    title: '标题',
    dataIndex: 'title',
    component: 'LongText2Ellipsis',
    componentProps: {},
    width: 300,
  },
  {
    title: '摘要',
    dataIndex: 'group',
    component: 'MultipleCol',
    // 数据聚合成新的字段group
    formatValues: (_, record) => {
      return [
        {
          label: '人员',
          value: record.person,
        },
        {
          label: '事项',
          value: record.event,
          tooltip: true,
        },
        {
          label: '时间',
          value: record.time,
          tooltip: true,
        },
      ];
    },
    width: 260,
  },
  {
    title: '发起人',
    dataIndex: 'personInfo',
    width: 260,
    component: 'Person',
    componentProps: {
      // 头像点击事件
      onClick: (info) => {
        console.log(info);
      },
    },
    formatValues: (_, record) => {
      return {
        avatar: record.personUrl,
        name: record.person,
      };
    },
  },
  {
    title: '发起时间',
    dataIndex: 'startTime',
    component: 'Time',
    width: 260,
  },
  {
    title: '完成时间',
    cellType: 'time',
    dataIndex: 'endTime',
    component: 'Time',
    width: 260,
  },
  {
    title: '流程状态',
    component: 'Status',
    dataIndex: 'statusName',
    // Status 组件入参
    componentProps: {
      dataSource: [
        { value: '处理中', color: 'warning' },
        { value: '审批通过', color: 'success' },
        { value: '审批拒绝', color: 'error' },
        { value: '已撤销', color: 'info' },
      ],
    },
    // 字段filter
    formatValues: (_, record) => {
      const statusMap = {
        1: '处理中',
        2: '审批通过',
        3: '审批拒绝',
      };
      return statusMap[record.status];
    },
    width: 260,
  },
  {
    title: '操作',
    component: 'Operates',
    dataIndex: 'operate',
    fixed: 'right',
    componentProps: {
      value: [
        {
          btnText: '查看',
          btnType: 'link',
          href: '',
          disabled: true, // Boolean | Function
          loading: (record) => false,
        },
        {
          btnText: '跳转',
          btnType: 'link',
          visible: (record) => false, // Boolean | Function
          target: '_blank',
          href: '',
        },
        {
          btnText: '通用',
          onClick: (data, record, reload) => {
            console.log('OK', data);
            // 更新页面
            setTimeout(reload, 1000);
          },
        },
        {
          btnText: '删除',
          component: 'ConfirmModal', // 二次确认弹窗
          componentProps: {
            title: '提示',
            content: (data) => `确认删除 ${data.title} 吗?`,
            onOk: (data, reload) => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  reject();
                }, 1000);
              }).finally(() => {
                // 页面刷新
                // reload()
              });
            },
          },
          type: 'danger',
        },
      ],
    },
    width: 260,
  },
];
const getTableData = async (props) => {
  console.log('form参数', props);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: [
          {
            id: 1,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛',
            event: '事项',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 1,
          },
          {
            id: 2,
            title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
            person: '卓洛2',
            event: '很长很长很长很长很长很长很长很长很长很长的文字',
            time: '2022-7-7',
            startTime: '2022-4-8 10:43',
            endTime: '2022-4-8 10:43',
            status: 2,
          },
        ],
        totalNumber: 100,
        pageSize: 10,
      });
    }, 1500);
  });
};
const buttons = [
  {
    type: 'batch',
    btnText: '批量选中',
    onClick: (keys, data, reload) => {
      // 表格刷新
      console.log(keys, data);
      setTimeout(reload(), 1000);
    },
  },
  {
    type: 'batch',
    btnText: '批量待定',
    disabled: true,
  },
  {
    type: 'batch',
    btnText: '批量退回',
    visible: (record) => {
      return true;
    },
  },
  {
    type: 'batch',
    btnText: '批量退回',
  },
  {
    type: 'batch',
    btnText: '批量退回',
  },
  {
    type: 'action',
    btnText: '主操作',
    btnType: 'dropdown',
    onClick: (key, reload) => {},
    dataSource: [
      {
        label: '1st menu item',
        key: '1',
      },
      {
        label: '2nd menu item',
        key: '2',
      },
      {
        label: '3rd menu item',
        key: '3',
      },
    ],
  },
  // {
  //   type: 'action',
  //   children: (
  //     <a href="" target="_blank">
  //       跳转
  //     </a>
  //   ),
  // },
  {
    type: 'action',
    btnText: '导出',
  },
  {
    type: 'action',
    btnText: '新建',
    btnType: 'primary',
    leftIcon: <AddIcon style={{ marginRight: '6px' }} />,
  },
];

// 表格过滤条件
const filterProps = {
  status: 1,
};
const App = () => {
  const tableRef = useRef(); // tableRef.current
  return (
    <>
      <YwTable
        columns={columns}
        ref={tableRef}
        showTotal
        rowKey="id"
        getTableData={getTableData}
        filterProps={filterProps}
        buttons={buttons}
        rowSelection={{}}
        pagination={{ showQuickJumper: true, pageSize: 10 }}
      />
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```