React Table이 React Table과 TailwindCSS를 사용하여 작업 가능한 데이터 테이블을 구축하는 방법

38326 단어 reactshowdevwebdevjavascript
본고에서 우리는react표와tailwindcss를 사용하여 조작 가능한 데이터 테이블을 구축하는 방법을 이해할 것이다.데이터 테이블은 응용 프로그램 대시보드의 중요한 UI 요소입니다.
전단 개발에서 신뢰할 수 있는 데이터 테이블을 어떻게 구축하는지 이해하는 것은 시종 중요하다.

데이터시트란 무엇입니까?


기술적인 부분에 들어가기 전에데이터 테이블이 무엇인지, 그리고 왜 사용자의 입장에서 볼 때 중요한지 이해해 봅시다.
데이터 테이블은 데이터 목록의 명확한 표시이다.그것은 행과 열로 데이터를 표시하는 방법이다.

왜 그것이 중요합니까?


온라인 서비스를 제공하는 전자상거래 상점을 운영하고 있다고 가정하십시오.당신은 좋은 형식으로 월간 주문서를 보고 싶고, 특정 월에 가장 자주 구매하는 상품을 알고 싶습니다.
전통적인 방법 중 하나는 excel이나 구글 작업표의 모든 데이터를 관리하는 것이다.너는 여전히 이렇게 할 수 있다.그러나 빅데이터 집합이 되면 귀찮아진다.
다음은 데이터 테이블의 역할이다.기본적으로 정렬 순서, 필터링 옵션, 페이지 데이터 등 모든 기능을 사용하여 테이블의 모든 보고 데이터를 관리할 수 있습니다.
모든 기능을 통해 데이터를 쉽게 관리할 수 있습니다.

프레젠테이션


여기서 우리는 스마트 데이터 테이블을 구축할 것이다. 이 테이블에서 우리는 동적으로 테이블에 줄을 추가하고 데이터 테이블 자체에 데이터를 추가/편집할 수 있다.

설치 및 설치


여기서 우리는 데이터 테이블을 가진 클라이언트 응용 프로그램이 필요하다.그리고 데이터를 서버에 보내고 서버는 Google sheet에 저장합니다.
그러나 본고는 주로react표를 이용하여 데이터 테이블을 구축하는 데 주목한다.만약 당신이 nodejs에 구글 시트를 통합하는 방법을 배우고 싶다면.이것 확인article
명령 create-react-app 을 사용하여react 응용 프로그램을 만듭니다
npx create-react-app client
현재, 루트 디렉터리에react 프로그램이 있습니다.

이후 설치react-table,react 응용 프로그램에서 테이블을 만드는 데 사용되는 머리 없는 ui입니다.
npm i react-table
마지막으로,react 응용 프로그램에tailwindcss를 설치하겠습니다.나는 이 문제에 대해 깊이 토론하고 싶지 않다. 왜냐하면 이미 이 설정에 관한 좋은 교과서가 있기 때문이다.이것 확인article

입문


우선, 표는 주로 줄과 열을 포함한다.react표도 마찬가지다.따라서react표 연결에서 데이터와 열을 전달하여 열과 행을 보여야 한다.
이 구성 요소는 열과 줄을 매개 변수로 보여 주는 react 테이블 구성 요소를 만듭니다.
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, td 등이다.우리는 이 의미의 일부 속성이 있어야만 그것을 정상적으로 작동시킬 수 있다.예를 들어 처음부터 페이지 나누기나 필터 논리를 만듭니다.html 요소에 접근해야 할 수도 있습니다.react-table는 이러한 상자를 열면 바로 사용할 수 있는 기능을 제공한다.이를 위해서는 도구를 usetable 연결에서 HTML 요소에 비추어야 합니다.
이것이 바로 useTable 갈고리 도구의 용도다.사용자 정의 속성을 사용하여 이 속성을 덮어쓸 수도 있습니다.일부 아이템은 getTableProps, getTableBodyProps 등이 있습니다.
<table className="min-w-full divide-y divide-gray-200"
{...getTableProps()} />

</table>
여기, 우리는react표의 getTableProps개props를 비추는 표가 있습니다.
이렇게 하려면 렌더링thead, tbody 등이 필요합니다.
<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 및 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
여기서 우리는 소수의 값과 함수를 도구로 전달한다.우리 하나하나 분해하고,
  • 값 - 값을 사용자 정의 셀로 되돌려줍니다. 구성 요소에서 렌더링하려면 초기 값이 필요합니다
  • 행 - 셀을 삽입한 행의 값을 반환합니다.
  • 열 - 셀을 추가할 열의 값을 반환합니다.
  • 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)
  }
}

    결론


    웹 개발 생애에서 데이터 테이블을 어떻게 구축하는지 이해하는 것이 중요합니다.개발 생명의 어느 시점에 그것을 실현해야 할 수도 있기 때문이다.it의 개념을 끊임없이 탐색하고 대량의 실천을 하여 it의 수준을 향상시킨다.
    Source Code
    자체 제작 Ngrok 서버가 HFUT 네트워킹 관통
    Mac 원격 로그인 아리운 서버

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage