Table

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

tips: 因为docusaurus样式中有table样式，造成了冲突，文档中的table样式可能与实际使用时略有不一致;

基础使用

columns : 表头
data : 源数据

function App() {
  const columns = [
    {
      label: '工单号',
      key: 'number',
      width: '91',
    },
    {
      label: '标题',
      key: 'title',
      width: '91',
    },
    {
      label: '优先级',
      key: 'level',
      width: '91',
    },
    {
      label: '受理人/组',
      key: 'handler',
    },
    {
      label: '问题分类',
      key: 'problem',
    },
    {
      label: '创建时间',
      key: 'createDate',
    },
  ]
  const data = [
    {
      number: '123456',
      title: '你猜啊',
      level: '紧急',
      handler: '售前组',
      problem: '你猜/再猜',
      createDate: '2019-05-30',
    },
    {
      number: '654321',
      title: '你再猜啊',
      level: '一般',
      handler: '研发组',
      problem: '你猜/再猜/猜不着',
      createDate: '2019-05-30',
    },
  ]
  return (
    <div className="ykui-demo-row">
      <Table
        columns={columns}
        data={data}
      />
    </div>
  );
}

自定义展示内容

render : 自定义渲染函数

function App() {
  const columns = [
    {
      label: '工单号',
      key: 'number',
      width: '91',
    },
    {
      label: '自定义标题',
      key: 'title',
      width: '91',
      render: ({row}) => {
        return <span className="txt">{row.title}</span>
      }
    },
    {
      label: '优先级',
      key: 'level',
      width: '91',
    },
    {
      label: '受理人/组',
      key: 'handler',
    },
    {
      label: '问题分类',
      key: 'problem',
    },
    {
      label: '创建时间',
      key: 'createDate',
    },
    {
      label: '操作',
      key: 'handle',
      width: '91',
      render: (item) => (
        <a href="#" className="cell-link" onClick={() => console.log(item)}>
          <span className="txt">领单</span>
        </a>
      ),
    },
  ]
  const data = [
    {
      number: '123456',
      title: '你猜啊',
      level: '紧急',
      handler: '售前组',
      problem: '你猜/再猜',
      createDate: '2019-05-30',
    },
    {
      number: '654321',
      title: '你再猜啊',
      level: '一般',
      handler: '研发组',
      problem: '你猜/再猜/猜不着',
      createDate: '2019-05-30',
    },
  ]
  return (
    <div className="ykui-demo-row">
      <Table
        columns={columns}
        data={data}
      />
    </div>
  );
}

可多选的表格

设置以下下内容

type: 'checkbox'
rowKey
onRowCheck 多选时，选中行中调用onRowCheck的方法
checked 多选时，选中的行

function App() {
  const columns = [
    {
      label: '工单号',
      key: 'number',
      width: '91',
    },
    {
      label: '标题',
      key: 'title',
      width: '91',
    },
    {
      label: '优先级',
      key: 'level',
      width: '91',
    },
    {
      label: '受理人/组',
      key: 'handler',
    },
    {
      label: '问题分类',
      key: 'problem',
    },
    {
      label: '创建时间',
      key: 'createDate',
    },
    {
      label: '操作',
      key: 'handle',
      width: '91',
      render: (item) => (
        <a href="#" className="cell-link" onClick={() => console.log(item)}>
          <span className="txt">领单</span>
        </a>
      ),
    },
  ]
  const data = [
    {
      number: '123456',
      title: '你猜啊',
      level: '紧急',
      handler: '售前组',
      problem: '你猜/再猜',
      createDate: '2019-05-30',
    },
    {
      number: '654321',
      title: '你再猜啊',
      level: '一般',
      handler: '研发组',
      problem: '你猜/再猜/猜不着',
      createDate: '2019-05-30',
    },
  ]
  return (
    <div className="ykui-demo-row">
      <Table
        columns={columns}
        data={data}
        type='checkbox'
        showRowHover={true}
        rowKey='number'
      />
    </div>
  );
}

空表格状态和提示

emptyDocs : 空表提示

data : 源数据

function App() {
  const columns = [
    {
      label: '工单号',
      key: 'number',
      width: '91',
    },
    {
      label: '标题',
      key: 'title',
      width: '91',
    },
    {
      label: '优先级',
      key: 'level',
      width: '91',
    },
    {
      label: '受理人/组',
      key: 'handler',
    },
    {
      label: '问题分类',
      key: 'problem',
    },
    {
      label: '创建时间',
      key: 'createDate',
    },
    {
      label: '操作',
      key: 'handle',
      width: '91',
      render: (item) => (
        <a href="#" className="cell-link" onClick={() => console.log(item)}>
          <span className="txt">领单</span>
        </a>
      ),
    },
  ]
  return (
    <div className="ykui-demo-row">
      <Table
        columns={columns}
        emptyDocs="修改空状态提示"
        data={[]}
        tbodyClass="is-pointer"
      />
    </div>
  );
}

可拓展的表格

function App() {
  const columns = [
    {
      label: '工单号',
      key: 'number',
      width: '91',
    },
    {
      label: '标题',
      key: 'title',
      width: '91',
    },
    {
      label: '优先级',
      key: 'level',
      width: '91',
    },
    {
      label: '受理人/组',
      key: 'handler',
    },
    {
      label: '问题分类',
      key: 'problem',
    },
    {
      label: '创建时间',
      key: 'createDate',
    },
    {
      label: '操作',
      key: 'handle',
      width: '91',
      render: (item) => (
        <a href="#" className="cell-link" onClick={() => console.log(item)}>
          <span className="txt">领单</span>
        </a>
      ),
    },
  ]
  const data = [
    {
      number: '123456',
      title: '你猜啊',
      level: '紧急',
      handler: '售前组',
      problem: '你猜/再猜',
      createDate: '2019-05-30',
    },
    {
      number: '654321',
      title: '你再猜啊',
      level: '一般',
      handler: '研发组',
      problem: '你猜/再猜/猜不着',
      createDate: '2019-05-30',
    },
  ]
  const onExpand = (row) => {
    return new Promise(((resolve) => {
      setTimeout(() => {
        resolve({
          name: '所属店铺王小虎夫妻店',
          pid: 'ID12987122',
          sid: 'ID10333',
          category: '江浙小吃、小吃零食',
          address: '上海市普陀区真北路',
          desc: '荷兰优质淡奶，奶香浓而不腻',
        })
      }, 500)
    }))
  }
  const expandRender = (props) => {
    console.log(props)
    return <div>expandRender</div>
  }
  return (
    <div className="ykui-demo-row">
      <Table
        columns={columns}
        onExpand={onExpand}
        expandRender={expandRender}
        data={data}
        type="expand"
      />
    </div>
  );
}

固定表头

height : 设置高度

function App() {
  const columnsFix = [
    {
      label: '工单号',
      key: 'number',
      width: '91',
    },
    {
      label: '标题',
      key: 'title',
      width: '91',
    },
    {
      label: '优先级',
      key: 'level',
      width: '91',
    },
    {
      label: '受理人/组',
      key: 'handler',
    },
    {
      label: '问题分类',
      key: 'problem',
    },
    {
      label: '创建时间',
      key: 'createDate',
    },
    {
      label: '操作',
      key: 'handle',
      width: '91',
      render: (item) => (
        <a href="#" className="cell-link" onClick={() => console.log(item)}>
          <span className="txt">领单</span>
        </a>
      ),
    },
  ]
  const data = [
    {
      number: '123456',
      title: '你猜啊',
      level: '紧急',
      handler: '售前组',
      problem: '你猜/再猜',
      createDate: '2019-05-30',
    },
    {
      number: '654321',
      title: '你再猜啊',
      level: '一般',
      handler: '研发组',
      problem: '你猜/再猜/猜不着',
      createDate: '2019-05-30',
    },
  ]
  const dataMore = Object.keys(Array.apply(null, { length: 30 })).map((_) => data[0])
  const onExpand = (row) => {
    return new Promise(((resolve) => {
      setTimeout(() => {
        resolve({
          name: '所属店铺王小虎夫妻店',
          pid: 'ID12987122',
          sid: 'ID10333',
          category: '江浙小吃、小吃零食',
          address: '上海市普陀区真北路',
          desc: '荷兰优质淡奶，奶香浓而不腻',
        })
      }, 500)
    }))
  }
  return (
    <div className="ykui-demo-row">
      <Table
        columns={columnsFix}
        height='calc(100vh - 330px)'
        data={dataMore}
      />
    </div>
  );
}

Table API

属性	说明	类型	默认值
columns	表头	`singleColumn []`	`--`
data	表格的数据	`anyObject []`	`--`
showRowHover	表格行的hover样式	`boolean`	`true`
type	表格类型	`checkbox〡expand`	`--`
onExpand	扩展方法	`Function`	`--`
rowKey	在单选和多选中，通过rowKey取出一行的唯一ID	`any`	`--`
selected	单选时，选中的行	`any`	`--`
onRowSelect	单选时，选中一行中调用onRowSelect	`Function`	`--`
checked	多选时，选中的行	`checkedProps`	`--`
onRowCheck	多选时，选中行中调用onRowCheck	`Function`	`--`
onRowClick	点击一行时，调用此方法	`Function`	`--`
expandRender	扩展内容	`Function`	`--`
emptyDocs	表格为空时的提示	`string`	`--`
tbodyClass	tbody 上的类名	`string`	`--`
height	表格高度	`string`	`--`
style	表格样式	`Object`	`--`
className	表格类名	`string`	`--`

singleColumn API

属性	说明	类型	默认值
label	标题	`string〡ReactNode〡Element`	`--`
key	每一项的key	`string`	`--`
width	宽度	`string〡number`	`--`
fixed	是否固定	`boolean`	`--`
className	类名	`string`	`--`
render	渲染时对数据处理	`Function`	`--`

基础使用​

自定义展示内容​

可多选的表格​

空表格状态和提示​

可拓展的表格​

固定表头​

Table API​

singleColumn API​

基础使用

自定义展示内容

可多选的表格

空表格状态和提示

可拓展的表格

固定表头

Table API

singleColumn API