DataTables React 组件

这件事早就应该做了——事实证明，React 不仅仅是昙花一现（谁会想到！</sarcasm>），因此，在这篇文章中，我怀着一种轻松的感觉和宣布新软件的欣喜之情介绍了 DataTables 的 React 组件。

自十多年前首次发布以来，React 对前端开发产生了深远的影响，现在它所利用的许多概念也被其他框架广泛使用。在 2023 年 JavaScript 现状调查中，它是使用最广泛的 UI 库。如果你不太可能使用过 React，那么他们的井字棋教程是入门的好方法。在本文的剩余部分，我将假设你满意 React 的基本概念 - 组件、属性、状态、JSX 等等。

用于 React 的新 DataTables 组件基本上是对现有的 DataTables 库的封装，这种封装方式对于习惯于使用 React 的人来说是完全熟悉的，同时仍然提供了所有 DataTables 功能。

让我们直接来看一些新 DataTables React 组件的示例 - 这些示例全部托管在出色的 StackBltiz 中，它是一个基于浏览器的 IDE 和开发环境，允许你构建和运行项目。在本例中，我使用 Vite 和 Typescript 创建了简单的 React 应用程序，演示了 DataTables 组件的不同部分。

基本初始化.
Ajax 数据示例演示如何使用对象作为数据源，通过 columns.data 选项填充表格。
侦听事件.
响应式和选择扩展.
用于文件导出的 Buttons 扩展，它需要使用两个附加函数来分配 JSZip 和 pdfmake。
API 访问和使用.
反应数据
在列中显示 React 组件

安装

DataTables 手册包含有关如何安装和使用 DataTables React 组件的全部详细信息，但我们在此介绍基础知识。

首先，使用软件包管理器安装 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 库用 -dt 后缀。这是 DataTables 默认样式。其他造型包，例如 Bootstrap、Bulma、Semantic UI 等也可用。用户可以用 DataTables 下载生成器获得要使用的包列表。

使用

在组件中安装并注册后，就会在 JSX 中有可用的 <DataTable> 组件（你可以通过更改上述使用的 import 语句更改名称）。它接受可用来描述表格表头和页脚的子元素。

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

该组件接受一个属性数，可用来配置 DataTable，包括 ajax、columns 和 options。请参阅文档以获取完整详细信息。

初始化

下面显示了在 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;

文档

这就是如何在 DataTables React 组件中启动并运行！当然，它还有更多内容，包括将 React 组件放置到表格单元格、使用事件以及 DataTables API 的功能。请参阅 DataTables React 文档以获取有关这些点和更多内容的完整详细信息。

源代码和反馈

此组件的源代码在 Github 上可用，并且我们始终欢迎改进和增强方面的建议。如果你有一些改进的想法，请使用论坛。同样地，如果你遇到任何问题，请在论坛中发布一条指向 StackBlitz 项目或演示该问题的最小化 Git 代码库的链接，以便调试。