PatternFly 表格

在TypeScript中，列被解释成一个字符串的数组或者匹配 ICell 类型的的对象数组。

ICell 是 TypeScript 接口的名称，表示 <Table> 的一个单元格。 列定义传递给 <Table> 组件的单元格属性，该属性可以采用 Array<ICell | 字符串>。

有两种列定义方式:

• 字符串数组定义列:

作为字符串数组定义的列

const columnsDefinition = [
  "First column",
  "Second column",
  "Third column"
]

• ICell对象数组定义列:

ICell对象数组定义的列

const columnsDefinition = [
  { title: "First column" },
  { title: "Second column" },
  { title: "Third column" }
];

代码案例

备注

你可以按照 Develop a table component with PatternFly React 完整走一遍案例，可以帮助你加深理解。完成后会形成本文下面的两个代码:

• App.js 页面渲染，采用React的 Table 和 Pagination(分页)

• data.js 提供数据

创建以下两个js:

• index.js

• App.js 页面渲染，采用React的 Table 和 Pagination(分页)

• data.js 提供数据

代码:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootEl = document.getElementById('root')
ReactDOM.render(<App />, rootEl);

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default
        ReactDOM.render(
        <NextApp />,
            rootEl
    )
    })
}

代码:

app.js

import * as React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Table, TableHeader, TableBody } from "@patternfly/react-table"; // react 表支持
import { Pagination } from '@patternfly/react-core'; // react 分页支持
import { columns, defaultRows } from './data'; // data.js 包含TypeScript的对象数据

const App = () => {
  const defaultPerPage = 2; // 分页属性: 默认每页2行记录
  const [numPerPage, setNumPerPage] = React.useState(defaultPerPage); // 设置好默认分页
  const [currentPage, setCurrentPage] = React.useState(1);  // 启动时使用第一页
  const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));
  const handlePerPageSelect = (_evt, newPerPage, newPage = 1, startIdx, endIdx) => {  // 处理每页选择
    setNumPerPage(newPerPage);
    setRows(defaultRows.slice(startIdx, endIdx));
  };
  const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {  // 处理分页的选项
    setCurrentPage(newPage);
    setRows(defaultRows.slice(startIdx, endIdx));
  }
  return (
    <React.Fragment>
      <Pagination
        onSetPage={handleSetPage}  // 设置分页时处理设置分页
        onPerPageSelect={handlePerPageSelect}  // 当分页功能选择时处理分页选择
        perPageOptions={[{ title: "2", value: 2 }, { title: "3", value: 3 }]}  // 设置可选的分页中记录数量
        page={currentPage}  // 当前显示页
        perPage={numPerPage} // 每页记录数量
        itemCount={defaultRows.length} />  // 表格记录数等于所有行
      <Table variant="compact" caption="PatternFly React Table" cells={columns} rows={rows}> // variant="compact" 表示表格压缩模式显示，比较好看 | cells={columns} rows={rows} 引入前面从 data.js import进来的数据
        <TableHeader />
        <TableBody />
      </Table>
    </React.Fragment>
  );
};

export default App;

代码:

data.js

export const columns = [
  { title: "First column" },
  { title: "Second column" },
  { title: "Third column" }
];
export const defaultRows = [
  {
    cells: [
      { title: "Row 1 column 1" },
      { title: "Row 1 column 2" },
      { title: "Row 1 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 2 column 1" },
      { title: "Row 2 column 2" },
      { title: "Row 2 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 3 column 1" },
      { title: "Row 3 column 2" },
      { title: "Row 3 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 4 column 1" },
      { title: "Row 4 column 2" },
      { title: "Row 4 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 5 column 1" },
      { title: "Row 5 column 2" },
      { title: "Row 5 column 3" }
    ]
  },
  {
    cells: [
      { title: "Row 6 column 1" },
      { title: "Row 6 column 2" },
      { title: "Row 6 column 3" }
    ]
  }
];

完成效果:

参考

• Develop a table component with PatternFly React