DataTables
高级交互
表格功能。
编辑器
一个全面的编辑
用于 DataTables 的库。
手册
下载
≡ 显示站点导航

React

React 是一款广泛用于创建响应式 Web 应用程序的 JavaScript 库。我们发布了 datatables.net-react 软件包，该软件包提供可用于 React 应用程序中组件的 DataTables。

此处的文档详细介绍了如何使用此组件，以及如何利用本手册的其他章节中介绍的 DataTables 概念。它们仍然适用，并且需要充分理解如何充分利用 DataTables。

安装和导入

使用包管理器安装 datatables.net-react 和 datatables.net-dt 软件包

# npm
npm install --save datatables.net-react datatables.net-dt

# yarn
yarn add datatables.net-react datatables.net-dt

要在你自己的组件中使用 DataTables 组件，你需要 import 它们以及 DataTables 核心，然后像下面这样将 DataTables 核心指定为组件中要使用的库

import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';

DataTable.use(DT);

这将为你提供可在你的组件中使用的 <DataTable> React 组件。

样式

导入 datatables.net-dt 软件包似乎是一个不必要的额外步骤 - 为什么 datatables.net-react 根本不依赖于该软件包？DataTables 支持多种不同的样式框架（Bootstrap、Bulma、Foundation 等），每个框架都作为不同的软件包发布，因此我们在此处所做的是导入默认样式的 DataTables，然后将其指定为 React 组件要使用的库。

如果你想利用 DataTables 的 Bootstrap 5 集成，你可以安装 datatables.net-bs5 软件包并使用它

import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';

DataTable.use(DT);

请注意，为更改样式集成，软件包名称中使用了后缀 -bs5 而不是 -dt。

使用 下载构建器 确保你获得了所需的软件包（并且只获得了那些软件包！）。

扩展

你还可以从其自己的 npm 软件包中安装 DataTables 扩展，并以标准方式使用它们 - 例如，对于 Select 和 Responsive，你可以使用

# npm
npm install --save \
    datatables.net-select-dt \
    datatables.net-responsive-dt

# yarn
yarn add \
    datatables.net-select-dt \
    datatables.net-responsive-dt

再次注意使用 -dt 后缀来表示样式 - 这将根据你需要的样式软件包而改变 - 同样，使用 下载构建器 来获取你需要的软件包名称！

对于每个扩展，你都需要 import 它，以便将其注册到 DataTables。例如，要同时使用 Select 和 Responsive

import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';
import 'datatables.net-select-dt';
import 'datatables.net-responsive-dt';

DataTable.use(DT);

请注意，你还需要提供初始化选项以在 DataTable 中启用扩展（例如，在此情况下为 select 和 responsive）。有关传递配置选项的详细信息，请参阅下面的使用部分。

同样的安装适用于所有其他 DataTables 扩展。使用 下载构建器 获取所需扩展的 npm 包列表。

使用

在组件中安装并注册之后，你将拥有可用于在你的 JSX 中使用的 <DataTable> 组件（如果你更喜欢其他内容，可以通过更改上述 import 语句来更改名称）。它接受子元素，该元素可用于描述表的表头和表尾

<DataTable>
    <thead>
        <tr>
            <th>Name</th>
            <th>Location</th>
        </tr>
    </thead>
</DataTable>

属性

<DataTable> 组件具有可以分配用于配置 DataTable 的以下属性

  • ajax - Ajax 选项供 DataTables 引用 - 通过 Ajax 为表格加载数据。
  • className - 分配给 table 的类名称
  • columns - 用于 DataTables 初始化 的列数组
  • data - DataTables 数据数组。这是可选的，如果使用 Ajax 加载 DataTable，则不应使用此属性。
  • options - 表的 DataTables 选项。请注意，其中可以包括 columns、data 和 ajax - 如果使用上面其中一个属性提供，则它们会覆盖此处提供的匹配项。
  • slots - 包含插槽函数的对象，可用于在 DataTable 列内显示 React 组件。请参阅下面的React 组件部分。
  • on* - 事件函数 - 请参阅以下事件部分。

基本初始化

下面显示了在 React 应用中使用 DataTables 的最基本示例

import { useState } from 'react';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';

import './App.css';

DataTable.use(DT);

function App() {
  const [tableData, setTableData] = useState([
    [ 'Tiger Nixon', 'System Architect' ],
    [ 'Garrett Winters', 'Accountant' ],
    // ...
  ]);

  return (
        <DataTable data={tableData} className="display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                </tr>
            </thead>
        </DataTable>
    );
}

export default App;

示例：基本初始化。

Ajax 数据

你可能希望通过 Ajax 加载要显示在表中的数据，而不是使用本地 React 数据。可以通过 ajax 属性直接指向数据源的 URL 来实现

import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';

DataTable.use(DT);

function App() {
    const columns = [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary' },
    ];

    return (
        <DataTable ajax="/data.json" columns={columns} className="display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </DataTable>
    );
}

export default App;

示例：Ajax 数据示例，展示如何使用对象作为数据源，通过 columns.data 选项填充表。

事件

DataTables 会触发大量事件，当事件发生时，侦听并对这些事件作出响应会很有用。通过 DataTables / React 组件，你可以使用 on* 属性（其中，完整名称由 事件名称 以下的驼峰形式表示，并以 on 作为前缀）侦听事件

<DataTable
    ajax="/data.json"
    onXhr={xhrEvent}
    onDraw={drawEvent}
>

这将侦听 xhr 和 draw，并按给定函数调用。活动将与 DataTables 文档中描述的参数相同。

示例：侦听事件。

扩展

上述的安装部分说明了如何安装并注册 DataTables 扩展。安装后，可以使用 DataTables 标准方法，通过它的初始化选项进行使用。在该示例中，我们通过 select 选项来初始化 Select 和 Responsive 扩展

import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';
import 'datatables.nt-responsive-dt';
import 'datatables.net-select-dt';

DataTable.use(DT);

function App() {
  const columns = [
    { data: 'name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'extn' },
    { data: 'start_date' },
    { data: 'salary' },
  ];

    return (
        <DataTable
            ajax="/data.json"
            columns={columns}
            className="display"
            options={{
                responsive: true,
                select: true,
            }}
        >
            <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
            </thead>
        </DataTable>
    );
}

export default App;

对于 CSS 文件，也可以导入扩展 - 例如

@import 'datatables.net-dt';
@import 'datatables.net-responsive-dt';
@import 'datatables.net-select-dt';

示例：响应式和选择性扩展。

示例：用于文件导出的按钮扩展，该扩展需要使用两个附加函数来分配 JSZip 和 pdfmake。

API

在使用 DataTables 时，您通常希望使用 其 API 来释放其全部潜力。这可以通过 datatables.net-react 组件的 ref 属性来实现。

function App() {
    const table = useRef();

    return (
        <DataTable
            ajax="/data.json"
            ref={table}
        >
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </DataTable>
    );
}

该 ref 具有一个包含通过 dt() 函数访问 DataTables 的对象 - 例如

console.log(
    table.current.dt().page.info()
);

示例：API 访问和使用。

响应式数据

React 最激动人心且最实用的部分之一就是基于 组件状态 来更新显示内容。概括地说，当您更改状态值时，UI 将自动更新为反映该更改 - 无论该更改多么复杂。datatables.net-react 软件包完全支持 React 状态数据，并将自动反映对状态所做的更改。

在以下示例中，我们采用经典的 React 井字棋教程，并让它在数据表中显示游戏的动作

示例：响应式数据

这是通过将数据状态（从 useState()）作为 data 属性传递给 React <DataTable> 组件来完成的。

const [tableData, setTableData] = useState([]);

return (
    <DataTable
        className="display"
        data={tableData}
    >
        <thead>
            <tr>
                <th>Move</th>
                <th>Player</th>
                <th>Position</th>
                <th>Time</th>
            </tr>
        </thead>
    </DataTable>
);

随着游戏进行，在将状态添加到状态数组时，状态将被更新

const nextTableData = tableData.slice();

nextTableData.push({
    move: nextTableData.length + 1,
    player: xIsNext ? 'X' : '0',
    position: idx,
    time: new Date()
});

setTableData(nextTableData);

React 组件

您可能会希望在某个时候在 DataTable 的单元格内显示 React 组件。为此，DataTable 组件支持为每个列定义“插槽”函数。该函数传递有关正在呈现的单元格的数据，并采用 React 元素/JSX 作为返回。

这是使用 <DataTable> 组件的 slots 属性来完成的。它是一个对象，其键是列索引或列名称（columns.name） - 这些键用于标识插槽应应用于哪一列。每个插槽值都是一个函数，可以采用两个或三个参数。

在以下内容中，将 <Button> 组件呈现到 0 列索引（即第一列）

<DataTable
    slots={{
        0: (data, row) => (
            <Button onClick={doClick}>
                Click me!
            </Button>
        )
    }}
>

如果插槽函数需要两个参数，它们是

  1. 单元格数据
  2. 行数据

然后 DataTables 将自动尝试从返回的 React 元素中提取排序和搜索数据。

如果插槽函数需要三个参数，它们是

  1. 单元格数据
  2. 数据类型（sort、type、filter、display）
  3. 行数据

如果您已经熟悉 DataTables，您可能会识别出这些参数是 用于渲染功能 和 正交数据 的参数。它允许您返回 DataTables 用于排序、搜索和类型检测的特定数据。display 类型需要返回中的 React 元素/JSX。

井字棋

作为其实际操作的一个示例，让我们取用上述的响应式数据示例，假设我们希望每走一步都在表中使用 <Square> 组件来显示，而不是字符串 X / O。

看起来可能像这样

<DataTable
    slots={{
        1: (data) => {
            return <Square val={data} />;
        }
    }}
>

注意如何根据传入的数据为函数返回使用 JSX，并且使用 1 作为要应用此索引的列的列索引标识符。

示例：在某列显示 React 组件

页面导航

DataTables

DataTables 由 SpryMedia Ltd 设计并创建。
© 2007-2024 授权给 MIT。 隐私政策。 支持者。
SpryMedia Ltd 在苏格兰注册，公司编号。SC456502。