DataTables
進階互動功能
為您的表格提供進階互動功能。
Editor
用於 DataTables 的
完整編輯函式庫。
手冊
下載
≡ 顯示網站導覽

React

React 是一個廣泛用於建立反應式 Web 應用程式的 Javascript 函式庫。我們發布了 datatables.net-react 套件，該套件提供了 DataTables，可作為 React 應用程式中的元件使用。

此處的文件詳細說明如何使用此元件，以及如何使用本手冊其他章節中介紹的 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 套件清單。

使用

在您的元件中安裝和註冊後，您將可以使用 <DataTable> 元件在您的 JSX 中使用（如果您偏好其他名稱，可以透過變更上面使用的 import 陳述式來變更名稱）。它接受可用於描述表格的標頭和頁尾的子元素

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

屬性

<DataTable> 元件具有以下屬性，可以指定用於配置 DataTable

  • ajax - DataTables 的 Ajax 選項 - 通過 Ajax 為表格載入資料。
  • className - 要指定給 table 的類別名稱
  • columns - 定義用於DataTables 初始化的 columns 陣列
  • data - DataTables 的資料陣列。這是選用的，如果您使用 Ajax 載入 DataTable，則不應使用此屬性。
  • options - 表格的DataTables 選項。請注意，這可以包括 columns、data 和 ajax - 如果它們是由上述的屬性之一提供，則會覆寫此處提供的相符選項。
  • slots - 一個包含插槽函數的物件，可用於在 DataTable 資料行中顯示 React 元件。請參閱下方的React 元件部分。
  • on* - 事件函數 - 請參閱下方的事件部分。

基本初始化

DataTables 在 React 應用程式中最基本的使用範例顯示如下

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 資料。可以使用指向資料來源 URL 的 ajax 屬性來完成此操作

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* 屬性來監聽事件（其中完整名稱由 事件名稱 以 camelCase 形式定義，並加上 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';

範例：Responsive 和 Select 擴充功能。

範例：用於檔案匯出的 Buttons 擴充功能，需要使用兩個額外的函數來指定 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 井字遊戲教學，並讓它在 DataTable 中顯示遊戲的步驟

範例：反應式資料

這是透過將資料狀態（來自 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。