React Table이 React Table과 TailwindCSS를 사용하여 작업 가능한 데이터 테이블을 구축하는 방법
38326 단어 reactshowdevwebdevjavascript
전단 개발에서 신뢰할 수 있는 데이터 테이블을 어떻게 구축하는지 이해하는 것은 시종 중요하다.
데이터시트란 무엇입니까?
기술적인 부분에 들어가기 전에데이터 테이블이 무엇인지, 그리고 왜 사용자의 입장에서 볼 때 중요한지 이해해 봅시다.
데이터 테이블은 데이터 목록의 명확한 표시이다.그것은 행과 열로 데이터를 표시하는 방법이다.
왜 그것이 중요합니까?
온라인 서비스를 제공하는 전자상거래 상점을 운영하고 있다고 가정하십시오.당신은 좋은 형식으로 월간 주문서를 보고 싶고, 특정 월에 가장 자주 구매하는 상품을 알고 싶습니다.
전통적인 방법 중 하나는 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
여기서 우리는 소수의 값과 함수를 도구로 전달한다.우리 하나하나 분해하고,열 그룹에 사용자 정의 구성 요소를 매핑해야 합니다
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
Reference
이 문제에 관하여(React Table이 React Table과 TailwindCSS를 사용하여 작업 가능한 데이터 테이블을 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ganeshmani/how-to-build-an-actionable-data-table-with-react-table-and-tailwindcss-3891텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)