ReactJS UI Ant 设计表格组件
Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。 ReactJS UI Ant Design Table 组件用于显示数据行。用于以表格形式显示数据。我们可以在 ReactJS 中使用以下方法来使用 Ant Design Table 组件。
餐桌道具：
- 边框：用于指示是否显示所有表格边框。
- columns：用于表示表格的列。
- components：用于覆盖默认的表格元素，
- dataSource：用于表示要显示的数据记录数组。
- expandable：用于配置可扩展的内容。
- footer：用于表示表格页脚渲染器。
- getPopupContainer：是表格中下拉菜单的渲染容器。
- loading：用于表示表格的加载状态。
- locale：为 i18n 文本，包括过滤、排序、空文本等。
- pagination：用于分页的配置。
- rowClassName：用于表示行的类名。
- rowKey：用于表示行的唯一键。
- rowSelection：用于表示行选择配置。
- scroll：用于指示表格是否可以滚动。
- showHeader：用于指示是否显示表头。
- showSorterTooltip：用于标题显示下一个排序器方向的工具提示。
- size：用于表示表格的大小。
- sortDirections：用于表示排序方向。
- sticky：用于设置置顶和滚动条。
- 摘要：用于表示摘要内容。
- tableLayout：用于表示表格元素的表格布局属性。
- title：用于表示表格标题渲染器。
- onChange：当分页、过滤器或排序器发生变化时执行的回调函数。
- onHeaderRow：用于设置每个标题行的道具。
- onRow：用于设置每行的道具。
专栏道具：
- align：用于指定该列的对齐方式。
- className：用于表示该列的类名。
- colSpan：用于表示该列标题的跨度。
- dataIndex：用于显示数据记录的字段。
- defaultFilteredValue：用于表示默认过滤值。
- defaultSortOrder：用于表示排序值的默认顺序。
- editable：用于表示某列是否可以编辑。
- ellipsis：用于表示省略号单元格内容。
- filterDropdown：用于自定义过滤叠加。
- filterDropdownVisible：用于表示filterDropdown是否可见。
- 过滤：用于指示数据源是否被过滤。
- filtersValue：用于表示受控的过滤值，过滤器图标会高亮。
- filterIcon：用于自定义过滤器图标。
- filterMultiple：用于指示是否可以选择多个过滤器。
- filters：用于表示过滤器菜单配置。
- fixed：用于设置要固定的列。
- key：用于表示该列的唯一键。
- render：它是表格单元格的渲染器。
- responsive：用于表示显示该列的断点列表。
- shouldCellUpdate：用于表示控制单元格渲染逻辑。
- showSorterTooltip：如果标题显示下一个排序器方向工具提示，则用于覆盖表中的 showSorterTooltip。
- sortDirections：用于对表中的方向进行排序，值可以是升序或降序。
- sorter：是一个局部排序的排序函数。
- sortOrder：用于表示排序值的顺序。
- title：用于表示该列的标题。
- width：用于该列的宽度。
- onCell：用于在每个单元格上设置道具。
- onFilter：是一个回调函数，判断过滤时是否显示该行。
- onFilterDropdownVisibleChange： filterDropdownVisible改变时触发的回调函数
- onHeaderCell：用于在每个标题单元格上设置道具。
ColumnGroup 道具：
- title：用于表示列组的标题。
创建 React 应用程序并安装模块：
第 1 步：使用以下命令创建一个 React 应用程序：
npx create-react-app foldername第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
cd foldername第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：
npm install antd
项目结构：它将如下所示。
项目结构
示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。
App.js
import React from 'react'
import "antd/dist/antd.css";
import { Table } from 'antd';
export default function App() {
// Sample Data for the table
const dataSource = [
{ key: '1', username: 'Gourav', age: 10 },
{ key: '2', username: 'Kartik', age: 20 },
{ key: '3', username: 'Madhu', age: 30 },
{ key: '4', username: 'Karu', age: 40 },
{ key: '5', username: 'Dinesh', age: 50 },
];
// Sample Columns data
const columns = [
{
title: 'Username',
dataIndex: 'username',
key: 'username',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
return (
ReactJS Ant-Design Table Component
);
}运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：
npm start输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：
参考： https://ant.design/components/table/