DataTables React 元件

這早就該做了 - 結果證明 React 並非曇花一現（誰知道呢！ </sarcasm>），因此我帶著如釋重負的心情，以及一如既往發佈新軟體的喜悅，在這篇文章中介紹 DataTables 的 React 元件。

React 自十多年前首次發布以來，對前端開發產生了深遠的影響，它所利用的許多概念現在已被其他框架廣泛使用。在2023 年的 JS 狀態調查中，它是使用最廣泛的 UI 函式庫。在您不太可能沒有使用過 React 的情況下，他們的井字遊戲教學是一個很好的入門方式。在本文的其餘部分，我將假設您對 React 的基本概念（元件、屬性、狀態、JSX 等）感到滿意。

新的 DataTables React 元件基本上是現有 DataTables 函式庫的包裝器，以一種熟悉 React 使用者的方式公開它，同時仍然提供 DataTables 的所有功能。

讓我們直接進入一些新的 DataTables React 元件的範例 - 這些範例都託管在優秀的 StackBlitz 上，這是一個基於瀏覽器的 IDE 和開發環境，可讓您建置和執行專案。在這種情況下，我使用 Vite 和 Typescript 建立了簡單的 React 應用程式，展示 DataTables 元件的不同部分。

基本初始化.
Ajax 資料範例示範如何使用物件作為資料來源，透過 columns.data 選項來填入表格。
監聽事件.
Responsive 和 Select 擴充功能.
用於檔案匯出的 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 下載建置器以取得要使用的套件清單。

使用

一旦安裝並在您的元件中註冊，您將可以使用 <DataTable> 元件在您的 JSX 中使用（如果您喜歡其他名稱，可以透過變更上面使用的 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 儲存庫的連結，以示範該問題以便進行除錯。