テーブルをどのように反応テーブルと反応テーブルとTailwindCSSを構築する

この記事では、反応テーブルとTreWinWinCSSを使用してActionableデータテーブルを構築する方法を参照してください.データテーブルは、アプリケーションダッシュボードの重要なUI要素です.
フロントエンド開発に信頼性の高いデータテーブルを構築する方法を知ることは常に重要です.

どのようなデータテーブルですか？

技術的な部分に入る前に.どのようなデータテーブルを理解しようとして、なぜそれがユーザーの視点のように重要です.
データ表は、データのリストの明確な表現です.これは、行と列のデータを表現する方法です.

なぜそれが重要ですか？

あなたがオンラインサービスで電子商取引店を運営していると考えてください.あなたは素敵な表現形式で毎月の注文を参照してくださいし、また、特定の月に最も頻繁に購入したアイテムから知りたい.
伝統的なアプローチの一つは、ExcelまたはGoogleシートのすべてのデータを管理することです.あなたはまだそれを行うことができます.しかし、データの大規模なセットになると面倒です.
データテーブルの役割がここにあります.基本的には、ソートされた順序などのすべての機能を持つテーブル内のすべてのレポートデータを管理し、オプションとページ化されたデータをフィルタリングします.
それはあなたのすべての機能を簡単な方法でデータを管理するのに役立ちます.

デモ

ここでは、テーブルに動的に行を追加し、データテーブル自体でデータを追加/編集できるスマートデータテーブルを構築します.

セットアップとインストール

ここでは、データテーブルを持つクライアントアプリケーションが必要です.その後、データをGoogleシートに保存するサーバーにデータを送信します.
しかし、この記事は主に反応テーブルを使用してデータテーブルを構築することに焦点を当てています.あなたがNodeJSでGoogleシートを統合する方法を学びたいならば.チェックアウトarticle
コマンドを使って反応アプリケーションを作成しましょう.create-react-app

npx create-react-app client

さて、ルートディレクトリ内の反応アプリケーションがあります.

その後インストールreact-table これは、反応アプリケーションでテーブルを作成するための見出しのないUIです.

npm i react-table

最後に、あなたの反応アプリケーションでTailWindCSSをインストールしましょう.このセットアップについてよく書かれたチュートリアルがすでにあるので、私はこれに深く行きたくありません.チェックアウトarticle

始める

まず、テーブルには主に行と列が含まれます.同じ反応テーブルに行く.したがって、列と行をレンダリングするには、反応テーブルフックのデータと列を渡す必要があります.
テーブルをレンダリングするための引数として、列と行を取る反応テーブルコンポーネントを作成しましょう.

import React from "react";
import { useTable } from "react-table";

const Table = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
  } = useTable({
    columns,
    data,

  });

  return (
    //Render UI Here
  );
};

export default Table;

ここでは、列とデータを小道具として受け取り、USETableと呼ばれるフックに渡します.これにより、いくつかの小道具が返されます.
それをよりよく理解するために、一人でそれを壊しましょう.
任意のテーブルについては、次のようなHTMLセマンティクスがありますtable , th , tbody , tr and td . この意味論のためにいくつかのプロパティが必要です.たとえば、Paginationまたはフィルタロジックをゼロから作成するには.HTML要素にアクセスする必要があるかもしれません.react-table この機能をボックスから提供します.これを行うには、あなたのHTML要素にusetableフックから小道具をマップする必要があります.
それはからの小道具の目的ですuseTable フック.また、カスタムのいずれかを使用してこれらのプロパティをオーバーライドできます.柱のいくつかはgetTableProps , getTableBodyProps など

<table className="min-w-full divide-y divide-gray-200"
{...getTableProps()} />

</table>

ここでは、テーブルを持っているgetTableProps 反応テーブルから小道具それをマップします.
そのように、私たちはthead , tbody etc

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => (
        <th
          className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
          {...column.getHeaderProps()}
        >
          {column.render("Header")}
        </th>
      ))}
    </tr>
  ))}
</thead>

ここで注意することは重要です.headerGroup テーブルのヘッダになるヘッダを返します.

その後、我々はtbody 同じ種類のパターンで.

<tbody className="bg-white divide-y divide-gray-200" {...getTableBodyProps()}>
  {rows.map((row, i) => {
    prepareRow(row)
    return (
      <tr {...row.getRowProps()}>
        {row.cells.map(cell => {
          return (
            <td
              className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"
              {...cell.getCellProps()}
            >
              {cell.render("Cell")}
            </td>
          )
        })}
      </tr>
    )
  })}
</tbody>

満ちるTable/index.js ここのコンポーネント.

import React from "react"
import { useTable } from "react-table"

const Table = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
  } = useTable({
    columns,
    data,
  })

  return (
    <div className="flex flex-col w-full">
      <div className="-my-2 py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
        <div className="align-middle inline-block min-w-full shadow sm:rounded-lg border-b border-gray-200">
          <table
            className="min-w-full divide-y divide-gray-200"
            {...getTableProps()}
          >
            <thead>
              {headerGroups.map(headerGroup => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map(column => (
                    <th
                      className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                      {...column.getHeaderProps()}
                    >
                      {column.render("Header")}
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody
              className="bg-white divide-y divide-gray-200"
              {...getTableBodyProps()}
            >
              {rows.map((row, i) => {
                prepareRow(row)
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map(cell => {
                      return (
                        <td
                          className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"
                          {...cell.getCellProps()}
                        >
                          {cell.render("Cell")}
                        </td>
                      )
                    })}
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

export default Table

インポートしましょうTable 親コンポーネント内のコンポーネントとプロップとして必要なデータを渡します.
次のコードを追加しますApp.js ,

import React, { useState, useEffect } from "react"
import Table from "./components/Table"

function App() {
  const [rowdata, setRowData] = useState([])

  const onAddRowClick = () => {
    setRowData(
      rowdata.concat({ username: "", email: "", gender: "", phone: "" })
    )
  }

  const columns = [
    {
      Header: "Name",
      accessor: "username",
    },
    {
      Header: "Email",
      accessor: "email",
    },
    {
      Header: "Gender",
      accessor: "gender",
    },
    {
      Header: "Phone",
      accessor: "phone",
    },
  ]

  return (
    <div className="container mx-auto">
      <button
        onClick={onAddRowClick}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Add Row
      </button>
      <div className="flex justify-center mt-8">
        <Table columns={columns} data={rowdata} />
      </div>
    </div>
  )
}

export default App

ここでは、Table コンポーネント.重要なことは注意してくださいcolumns 配列.含むHeader and accessor .Header 私たちが内部のテーブルをレンダリングth 覚えているなら

{
  column.render("Header")
}

accessor 「表」コンポーネントでレンダリングする行の名前を参照します.
これまでのところ、テーブル内の列と行のレンダリング方法を見てきました.編集可能なセルを行の中にどのようにレンダリングするかを見ましょう.

編集可能なセルをレンダリングする

編集可能なセルをレンダリングするには、カスタム配列を列配列内に表示する必要があります.
コンポーネントの作成EditableCell/index.js 次のコードを追加します.

import React from "react"

const EditableCell = ({
  value: initialValue,
  row: { index },
  column: { id },
  updateMyData, // This is a custom function that we supplied to our table instance
}) => {
  // We need to keep and update the state of the cell normally
  const [value, setValue] = React.useState(initialValue)

  const onChange = e => {
    setValue(e.target.value)
  }

  // We'll only update the external data when the input is blurred
  const onBlur = () => {
    updateMyData(index, id, value)
  }

  // If the initialValue is changed external, sync it up with our state
  React.useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  return <input value={value} onChange={onChange} onBlur={onBlur} />
}

export default EditableCell

ここでは、いくつかの値と関数を小道具として渡します.一人でそれを壊しましょう.

value -カスタムセルへの値を返します.初期値を使用してコンポーネント内に表示します

row -セルを挿入する行の値を返します.

column -セルを追加した列の値を返します.

updatemydate - onblurイベントの親コンポーネントを更新するための小道具です

列内のカスタムコンポーネントをマップする必要があります

const columns = [
  {
    Header: "Name",
    accessor: "username",
    Cell: EditableCell,
  },
  {
    Header: "Email",
    accessor: "email",
    Cell: EditableCell,
  },
  {
    Header: "Gender",
    accessor: "gender",
    Cell: ({
      value: initialValue,
      row: { index },
      column: { id },
      updateMyData,
    }) => {
      const onItemClick = value => {
        console.log("value", value)
        updateMyData(index, id, value)
      }

      return (
        <DropDown
          options={[
            { label: "Male", value: "male" },
            { label: "Female", value: "female" },
          ]}
          title={"Select Gender"}
          selectedValue={initialValue}
          onItemClick={onItemClick}
        />
      )
    },
  },
  {
    Header: "Phone",
    accessor: "phone",
    Cell: EditableCell,
  },
]

注意深く見ると、ドロップダウンを挿入し、カスタム入力を実装しました.

検索とフィルタ

最後に、データテーブルの検索機能とフィルター機能を実装する必要があります.検索コンポーネントを表のコンポーネントの外部に表示するので、簡単になります.
内部で実装する必要はありませんTable . 親コンポーネントの状態を直接操作し、検索またはフィルタ入力に基づいてデータをフィルター処理できます.

const [rowdata, setRowData] = useState([])
const [filteredData, setFilteredData] = useState([])

// Searchbar functionality
const onSearchbarChange = e => {
  const value = e.target.value

  if (value === "") {
    setFilteredData(rowdata)
  } else {
    if (filteredData.length > 0) {
      const result = filteredData.filter(item => item.email === value)

      setFilteredData(result)
    } else {
      const result = rowdata.filter(item => item.email === value)

      setFilteredData(result)
    }
  }
}

// Filter functionality
const onItemClick = e => {
  console.log("e", e)
  if (e === "all") {
    setFilteredData(rowdata)
  } else {
    const result = rowdata.filter(item => item.gender === e)

    setFilteredData(result)
  }
}

結論

あなたのウェブ開発経歴でデータ表を構築する方法を知ることは、重要です.なぜなら、あなたの開発生活の中でいくつかの時点でそれを実装する必要があるかもしれません.それの概念を探求し、それによくなるために多くを練習してください.
Source Code