2분 안에 React JS에서 검색 및 페이지 매김을 사용하여 편집 가능한 간단한 테이블 만들기 | 리액트 JS…
2분 안에 React JS에서 검색 및 페이지 매김을 사용하여 편집 가능한 간단한 테이블 만들기 | React JS 개발
페이지 매김이 있는 표 보기는 데이터를 표시하는 데 가장 적합한 보기입니다. 게시물, 사용자 등과 같은 대규모 데이터 목록이 대시보드에 필요한 경우 간단한 테이블 보기를 만들 수 있습니다. 그러나 사용자 지정 테이블을 만드는 데 시간이 오래 걸립니다. 그래서 여기서 우리는 단 2분 만에 모범 사례 테이블 뷰를 생성할 수 있는 방법을 알아보겠습니다.
설치-
우리는 material-table 패키지를 사용할 것입니다. NPM 또는 Yarn을 사용하여 설치할 수 있습니다.
npm install material-table @material-ui/core
// or
yarn add material-table @material-ui/core
선택적으로 재료 아이콘을 설치할 수도 있습니다.
npm으로 @material-ui/icons를 설치하려면:
npm install @material-ui/icons
실로 @material-ui/icons를 설치하려면:
yarn add @material-ui/icons
구성-
설치 후 해당 구성 요소로 직접 가져올 수 있으며 필요한 데이터가 필요합니다.
열 배열이 필요합니다.
const columns = [
{ title: 'First Name', field: 'firstName' },
{
title: 'Last Name',
field: 'lastName',
initialEditValue: 'initial value',
},
{ title: 'Mobile Number', field: 'mobileNumber', type: 'numeric' },
{ title: 'Email', field: 'email', editable: 'never' },
]
이제 열에 대한 데이터 배열이 필요합니다. 데이터의 개체 키가 있는 열에서 필드 이름이 일치해야 합니다.
const data = [
{
firstName: 'Gyanendra',
lastName: 'Knojiya',
mobileNumber: 8802879231,
email: '[email protected]',
},
{
firstName: 'Virat',
lastName: 'Kohli',
mobileNumber: 9876543210,
email: '[email protected]',
},
{
firstName: 'Rohit',
lastName: 'Sherma',
mobileNumber: 9984572157,
email: '[email protected]',
},
]
액션 아이콘-
재료 아이콘을 추가할 수도 있습니다. 먼저 모든 아이콘을 가져와야 하고 그 후에 모든 작업에 대한 아이콘 참조를 추가해야 합니다.
//수입-
import AddBox from '@material-ui/icons/AddBox'
import ArrowDownward from '@material-ui/icons/ArrowDownward'
import Check from '@material-ui/icons/Check'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import ChevronRight from '@material-ui/icons/ChevronRight'
import Clear from '@material-ui/icons/Clear'
import DeleteOutline from '@material-ui/icons/DeleteOutline'
import Edit from '@material-ui/icons/Edit'
import FilterList from '@material-ui/icons/FilterList'
import FirstPage from '@material-ui/icons/FirstPage'
import LastPage from '@material-ui/icons/LastPage'
import Remove from '@material-ui/icons/Remove'
import SaveAlt from '@material-ui/icons/SaveAlt'
import Search from '@material-ui/icons/Search'
import ViewColumn from '@material-ui/icons/ViewColumn'
//추가하다-
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}
테이블 생성-
모두 끝났습니다. 테이블이 준비되었습니다. 데이터를 표시할 수 없습니다.
import React, { useState, forwardRef } from 'react'
import MaterialTable from 'material-table'
import AddBox from '@material-ui/icons/AddBox'
import ArrowDownward from '@material-ui/icons/ArrowDownward'
import Check from '@material-ui/icons/Check'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import ChevronRight from '@material-ui/icons/ChevronRight'
import Clear from '@material-ui/icons/Clear'
import DeleteOutline from '@material-ui/icons/DeleteOutline'
import Edit from '@material-ui/icons/Edit'
import FilterList from '@material-ui/icons/FilterList'
import FirstPage from '@material-ui/icons/FirstPage'
import LastPage from '@material-ui/icons/LastPage'
import Remove from '@material-ui/icons/Remove'
import SaveAlt from '@material-ui/icons/SaveAlt'
import Search from '@material-ui/icons/Search'
import ViewColumn from '@material-ui/icons/ViewColumn'
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}
const App = () => {
const columns = [
{ title: 'First Name', field: 'firstName' },
{
title: 'Last Name',
field: 'lastName',
initialEditValue: 'initial value',
},
{ title: 'Mobile Number', field: 'mobileNumber', type: 'numeric' },
{ title: 'Email', field: 'email', editable: 'never' },
]
const [data, setData] = useState([
{
firstName: 'Gyanendra',
lastName: 'Knojiya',
mobileNumber: 8802879231,
email: '[email protected]',
},
{
firstName: 'Virat',
lastName: 'Kohli',
mobileNumber: 9876543210,
email: '[email protected]',
},
{
firstName: 'Rohit',
lastName: 'Sherma',
mobileNumber: 9984572157,
email: '[email protected]',
},
])
return (
<>
<h1>Editable table example</h1>
<MaterialTable
title="Editable Table"
icons={tableIcons}
columns={columns}
data={data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
setData([...data, newData])
resolve()
}, 1000)
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataUpdate = [...data]
const index = oldData.tableData.id
dataUpdate[index] = newData
setData([...dataUpdate])
resolve()
}, 1000)
}),
onRowDelete: (oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataDelete = [...data]
const index = oldData.tableData.id
dataDelete.splice(index, 1)
setData([...dataDelete])
resolve()
}, 1000)
}),
}}
/>
</>
)
}
export default App
시사-
커피 사줘https://www.buymeacoffee.com/gyanknojiya
이 기사를 읽어 주셔서 감사합니다. 이 샌드박스https://codesandbox.io/s/editable-example-0wctb로 더 많은 것을 탐색할 수 있습니다.
질문이 있으시면 언제든지 저에게 연락하십시오: https://gyanendra.tech/#contact
https://codingcafe.co.in에 원래 게시되었습니다.
Reference
이 문제에 관하여(2분 안에 React JS에서 검색 및 페이지 매김을 사용하여 편집 가능한 간단한 테이블 만들기 | 리액트 JS…), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/gyanendraknojiya/create-a-simple-editable-table-with-search-and-pagination-in-react-js-in-2-min-react-js-2m4m
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React, { useState, forwardRef } from 'react'
import MaterialTable from 'material-table'
import AddBox from '@material-ui/icons/AddBox'
import ArrowDownward from '@material-ui/icons/ArrowDownward'
import Check from '@material-ui/icons/Check'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
import ChevronRight from '@material-ui/icons/ChevronRight'
import Clear from '@material-ui/icons/Clear'
import DeleteOutline from '@material-ui/icons/DeleteOutline'
import Edit from '@material-ui/icons/Edit'
import FilterList from '@material-ui/icons/FilterList'
import FirstPage from '@material-ui/icons/FirstPage'
import LastPage from '@material-ui/icons/LastPage'
import Remove from '@material-ui/icons/Remove'
import SaveAlt from '@material-ui/icons/SaveAlt'
import Search from '@material-ui/icons/Search'
import ViewColumn from '@material-ui/icons/ViewColumn'
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}
const App = () => {
const columns = [
{ title: 'First Name', field: 'firstName' },
{
title: 'Last Name',
field: 'lastName',
initialEditValue: 'initial value',
},
{ title: 'Mobile Number', field: 'mobileNumber', type: 'numeric' },
{ title: 'Email', field: 'email', editable: 'never' },
]
const [data, setData] = useState([
{
firstName: 'Gyanendra',
lastName: 'Knojiya',
mobileNumber: 8802879231,
email: '[email protected]',
},
{
firstName: 'Virat',
lastName: 'Kohli',
mobileNumber: 9876543210,
email: '[email protected]',
},
{
firstName: 'Rohit',
lastName: 'Sherma',
mobileNumber: 9984572157,
email: '[email protected]',
},
])
return (
<>
<h1>Editable table example</h1>
<MaterialTable
title="Editable Table"
icons={tableIcons}
columns={columns}
data={data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
setData([...data, newData])
resolve()
}, 1000)
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataUpdate = [...data]
const index = oldData.tableData.id
dataUpdate[index] = newData
setData([...dataUpdate])
resolve()
}, 1000)
}),
onRowDelete: (oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataDelete = [...data]
const index = oldData.tableData.id
dataDelete.splice(index, 1)
setData([...dataDelete])
resolve()
}, 1000)
}),
}}
/>
</>
)
}
export default App
Reference
이 문제에 관하여(2분 안에 React JS에서 검색 및 페이지 매김을 사용하여 편집 가능한 간단한 테이블 만들기 | 리액트 JS…), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gyanendraknojiya/create-a-simple-editable-table-with-search-and-pagination-in-react-js-in-2-min-react-js-2m4m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)