@sinoui/use-rest-table

@sinoui/use-rest-table 旨在简化与@sinoui/data-table 的相关处理

Usage no npm install needed!

<script type="module">
  import sinouiUseRestTable from 'https://cdn.skypack.dev/@sinoui/use-rest-table';
</script>

README

@sinoui/use-rest-table

npm version downloads

@sinoui/use-rest-table 旨在简化与@sinoui/data-table 的相关处理。

安装

使用yarn：

yarn add @sinoui/use-rest-table

使用npm:

npm i --save @sinoui/use-rest-table

快速使用

import React from 'react';
import useRestTable from '@sinoui/use-rest-table';
import DataTable, { TableColumn } from '@sinoui/data-table';

function ListDemo() {
  const dataSource = useRestTable('/users', [], { keyName: 'userId' });

  return (
    <DataTable {...dataSource}>
      <TableColumn name="userName" width={100} title="姓名" />
      <TableColumn name="age" width={100} title="年龄" />
    </DataTable>
  );
}

dataSource 的属性和方法

@sinoui/use-rest-table的dataSource继承了use-rest-page-api 的所有属性和方法，除此之外还有以下方法：

  • data 表示列表数据
  • loading 表示数据加载中的状态
  • error 表示加载错误的状态
  • onSelect() 列表选中时的回调函数
  • selectedRows 表示列表的选中项
  • setSelectedItems() 设置列表选中项的回调函数
  • refresh() 重新加载数据列表数据
  • getItem() 从列表数据中获取其中一条数据信息(不与后端交互)
  • create() 新增一条数据
  • onChange() 翻页、排序时的回调函数
  • sort 排序信息，类型为object
  • clean() 清空列表数据时的回调函数