表は、情報を行と列に編成したものです。データを構造化形式で保存および表示するために使用されます。

React テーブルは、React 用に構築された軽量、高速、完全にカスタマイズ可能 (JSX、テンプレート、状態、スタイル、コールバック) で拡張可能な Datagrid です。オプションのプロパティとコールバックを介して完全に制御できます。

特徴

1. 11kb と軽量です (スタイルにさらに 2kb 必要なだけです)。
2. 完全にカスタマイズ可能です (JSX、テンプレート、状態、スタイル、コールバック)。
3. オプションのプロパティとコールバックを介して完全に制御できます。
4. クライアント側とサーバー側のページネーションがあります。
5. フィルターが付いています。
6. ピボットと集約
7. ミニマルなデザインと簡単にテーマ設定可能

インストール

を作成しましょう 反応アプリ 次のコマンドを使用します。

 $ npx create-react-app myreactapp  

次に、インストールする必要があります 反応テーブル 。以下に示す npm コマンドを使用して、react-table をインストールできます。

 $ npm install react-table  

反応テーブルをインストールしたら、次のことを行う必要があります。 輸入 反応テーブルを反応コンポーネントに追加します。これを行うには、 ソース/App.js ファイルを開き、次のスニペットを追加します。

 import ReactTable from 'react-table';  

反応テーブルを使用してレンダリングする必要があるデータがあると仮定します。

 const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }]  

データとともに、以下も指定する必要があります。 列情報 と 列の属性 。

 const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }]  

render メソッド内で、このデータを react-table にバインドし、react-table を返す必要があります。

 return ( )  

さて、私たちの ソース/App.js ファイルは以下のような感じです。

 import React, { Component } from 'react'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; class App extends Component { render() { const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }] const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }] return ( ) } } export default App;  

出力

React アプリを実行すると、次のような出力が得られます。

ここで、行ドロップダウン メニューを変更すると、以下のような出力が得られます。