Учебное пособие по использованию компонента таблицы React Table, практическая разработка функций сортировки, разбиения по страницам, поиска и фильтрации.
Полная версия этой статьи：《Учебное пособие по использованию компонента таблицы React Table, практическая разработка функций сортировки, разбиения по страницам, поиска и фильтрации.》
В повседневной разработке, особенно для внутренних серверных систем, нам часто приходится использовать таблицы для отображения данных и в то же время предоставлять некоторые операции по манипулированию данными в таблицах. Для простых таблиц вы можете просто использовать собственную HTML-таблицу, но если вы хотите реализовать многофункциональную таблицу в React, это на самом деле очень сложно.
Предыдущие статьи на этом сайте "Самые лучшие 6 индивидуальный React Table Подробные рекомендации по личному тестированию компонентов》 упомянуто в react-table этотиндивидуальный Библиотека,Если вы мало что знаете об этой индивидуальной библиотеке, вы можете сначала узнать о ней.,Я не буду здесь вдаваться в подробности.
Короче говоря, таблица реагирования это очень мощная библиотека, в отличие от обычных компонентов таблиц, она не отвечает за рендеринг HTML и CSS вместо этого предоставляет ряд hooks Позволяет нам гибко создавать мощные табличные компоненты.
Так что используйте react-table Его сложно развивать, и эта статья объяснит, как это сделать. React используется в проектах react-table различные общие потребности, такие как: сортировка, пейджинг, фильтрация поиска и т. д., в то же время полный индивидуальный случай будет объединен, чтобы объяснить, как использовать соответствие; Material-UI А также моделирующие функции, такие как получение данных из бэкэнда для подкачки.
Если вы создаете инструмент управления серверной частью,Я не хочу иметь дело с проблемами внешнего интерфейса,РекомендуетсяКараюн Kara Cloud — это новое поколение инструментов разработки с низким уровнем написания кода, которые могут получить доступ к общим базам данных и Для общих компонентов внешнего интерфейса, таких как API и встроенные таблицы, вам не нужно знать интерфейс. Вы можете быстро создать свои собственные инструменты управления серверной частью, просто перетаскивая их. Еженедельная рабочая нагрузка снижается до. один день. Подробности см. в конце этой статьи.
Прочитав эту статью, вы узнаете
- Как использовать react-table существовать React Создание компонентов таблицы в
- Как использовать react-table Таблица компонентов осуществляет анализ данных Страница、сортировать、фильтр поиска фильтр
- Практический пример с таблицей реагирования: шаг за шагом научите вас, как использовать компонент таблицы реагирования для практики разбивки по страницам, сортировки, поиска и фильтрации.
Дальнейшее чтение：《Топ и простой в использованиииз React Генератор дизайна форм, перетаскивание для создания форм》
установка и использование реакционного стола
Для начала давайте создадим индивидуальный проект React:
npx create-react-app react-table-demo
cd react-table-demoЗатем устанавливаем реакционную таблицу:
Далее мы используем простой пример, чтобы объяснить, как реагировать на таблицу.
Предположим, у нас есть таблица заказов:
номер заказа | Имя | Адрес доставки | Дата заказа |
|---|---|---|---|
1596694478675759682 | Цзян Течжу | № 19, Западное Третье транспортное кольцо, Средняя дорога, район Хайдянь, Пекин | 2022-07-01 |
1448752212249399810 | Чэнь Чэнгун | Дом Тяньцзы, район Учан, Ухань, провинция Хубэй | 2022-06-27 |
1171859737495400477 | Эми Сонг | Дом Тяньцзы, район Учан, Ухань, провинция Хубэй | 2022-06-21 |
1096242976523544343 | Чжан Сяоле | Южные ворота университета Бэйхан, район Хайдянь, Пекин | 2022-06-30 |
1344783976877111376 | Ма Гоцин | К юго-востоку от моста Хуаюань, район Хайдянь, Пекин | 2022-06-12 |
1505069508845600364 | маленькие фрукты | Западная парковка аэропорта Гуанчжоу Тяньхэ | 2022-06-07 |
мы используем react-table Когда необходимо пройти индивидуальный вызов useTable из hooks построить таблицу.
import { useTable } from 'react-table'и useTable Получите два обязательных параметра:
- данные: таблица изданных
- столбцы: столбцы таблицы
Итак, давайте сначала определим эту отдельную таблицу порядка из данных и столбцов:
import React, { useMemo } from 'react'
function App() {
const data = useMemo(
() => [
{
name: 'Цзян Течжу',
address: '№ 19, Западное Третье транспортное кольцо, Средняя дорога, район Хайдянь, Пекин',
date: '2022-07-01',
order: '1596694478675759682'
},
{
name: 'Чэнь Чэнгун',
address: 'Дом Тяньцзы, район Учан, Ухань, провинция Хубэй',
date: '2022-06-27',
order: '1448752212249399810'
},
{
name: 'Эми Сонг',
address: 'Дом Тяньцзы, район Учан, Ухань, провинция Хубэй',
date: '2022-06-21',
order: '1171859737495400477'
},
{
name: 'Чжан Сяоле',
address: 'Южные ворота университета Бэйхан, район Хайдянь, Пекин',
date: '2022-06-30',
order: '1096242976523544343'
},
{
name: 'Ма Гоцин',
address: 'К юго-востоку от моста Хуаюань, район Хайдянь, Пекин',
date: '2022-06-12',
order: '1344783976877111376'
},
{
name: 'маленькие фрукты',
address: 'Западная парковка аэропорта Гуанчжоу Тяньхэ',
date: '2022-06-07',
order: '1505069508845600364'
}
],
[]
)
const columns = useMemo(
() => [
{
Header: 'номер заказа',
accessor: 'order'
},
{
Header: 'Имя',
accessor: 'name'
},
{
Header: 'Адрес доставки',
accessor: 'address'
},
{
Header: 'Дата заказа',
accessor: 'date'
}
],
[]
)
return (
<div>
<h1>React Table Demo —— Караюн(https://kalacloud.com)</h1>
<Table columns={columns} data={data}></Table>
</div>
)
}Вы можете заметить, что приезжаем сюда используем useMeno объявлять данные, это потому, что react-table документ Описание ввходящийиз data и columns должно быть memoized из, проще говоря, из можно кэшировать. Он будет пересчитываться только при изменении зависимости из в массиве зависимостей. useMemo Если вы не знакомы с «Из», предлагаю вам посмотреть его напрямую. Реагировать на документацию。
Затем мы строим индивидуальный Table Компонент получает columns и данные и переданы в useTable , он вернет ряд свойств, и мы можем использовать эти свойства для создания HTML table：
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
})
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}потому что использует родной из HTML таблица, поэтому не имеет стиля, Это также react-table Преимущество состоит в том, что мы можем настроить стиль по своему желанию, например, мы вводим github-markdown-css：
npm i github-markdown-cssто его можно использовать в проектах:
import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import './App.css'
+ import 'github-markdown-css'
function App() {
return (
- <div>
+ <div className="markdown-body" style={{ padding: '20px' }}>
<h1>React Table Demo —— Караюн(https://kalacloud.com)</h1>
<Table columns={columns} data={data}></Table>
</div>
)
}Эффект стиля реагирующей таблицы:
接下来我们给этотиндивидуальныйлист添加更多常见из Функция：сортировать、фильтр поиска фильтр、точка Страницаждать。
Дальнейшее чтение:《7 оплата Лучшее из Открытого кода React Мобильный терминал UI библиотека компонентов и структура шаблонов - Особенно рекомендуется для домашнего использования》
Функция сортировки таблиц React Table
Если мы просто хотим установить сортировку по умолчанию, мы можем настроить initialState Чтобы достичь:
useTable({
columns,
data,
initialState: {
sortBy: [
{
id: 'order',
desc: true
}
]
}
})Если вы хотите реализовать ручную сортировку, вам необходимо передать useSortBy этотиндивидуальный hooks выполнить:
import { useTable, useSortBy } from 'react-table' затем в useTable входящий useSortBy：
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
},
+ useSortBy,
)Тогда мы сможем columns серединаизопределенныйиндивидуальный Спецификация столбца sortType атрибут, который получает String или Функция, для Function из Способ использования следующий: и Для String Тип, он может принимать следующие три типа:
- alphanumeric：письмоили Выполняйте в цифровом форматесортировать（значение по умолчанию）
- basic：0 приезжать 1 междуизчислосортировать
- datetime: сортировка по дате, значение должно иметь тип Date.
Например, в нашем примере существуют,Мы хотели бы разрешить сортировку по номеру заказа.,Затем мы модифицируем:
const columns = useMemo(
() => [
{
Header: 'номер заказа',
accessor: 'order',
+ sortType: 'basic'
},
{
Header: 'Имя',
accessor: 'name'
},
{
Header: 'Адрес доставки',
accessor: 'address'
},
{
Header: 'Дата заказа',
accessor: 'date',
}
],
[]
)Тогда мысуществовать表头处середина添加сортировать Связанныйизлогика,И соответствующие стрелки отображаются в соответствии с текущей ситуацией сортировки столбца.,или ВОЗсуществоватьбез каких-либосортироватьне отображается, когда：
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
- <th {...column.getHeaderProps()}>
+ <th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
+ <span>
+ {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
+ </span>
</th>
))}
</tr>
))}
</thead>Эффект отображения следующий:
По картинке выше мы обнаружили индивидуальную проблему: даже если мы не настроили столбец «Имя», sortType,Но вы все равно можете сортировать,этот是因为один旦существовать useTable Входящий useSortBy,Тогда все столбцы можно будет отсортировать по умолчанию.,Если нам нужно отключить сортировку для определенного столбца,Это работает следующим образом:
const columns = useMemo(
() => [
{
Header: 'номер заказа',
accessor: 'order',
sortType: 'basic'
},
{
Header: 'Имя',
accessor: 'name',
+ disableSortBy: true,
},
{
Header: 'Адрес доставки',
accessor: 'address'
},
{
Header: 'Дата заказа',
accessor: 'date',
}
],
[]
)осортировать Функция更多详细细节参见документ：useSortBy。
Дальнейшее чтение：《7 оплата Лучшее из Открытого кода React UI библиотека компонентов и структура шаблонов Оценка - Особенно рекомендуется для сценариев домашнего использования.》
Функция фильтра поиска таблицы React Table
мы можем пройти useFilters Чтобы реализовать функцию фильтрации:
import { useTable, useFilters } from 'react-table'Аналогично необходимо useTable входящий：
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
},
+ useFilters,
)ПС: Внимание useFilters Должно находиться в useSortBy впереди, иначе будет сообщено об ошибке.
затем в поле ввода фильтра рендеринга в заголовке:
<th {...column.getHeaderProps()}>
{column.render('Header')}
+ <div>{column.canFilter ? column.render('Filter') : null}</div>
</th>Это индивидуальное поле ввода фильтра UI Нам нужно настраивать, поэтому мы определяем индивидуальность TextFilter Компоненты:
function TextFilter({ column: { filterValue, preFilteredRows, setFilter } }) {
const count = preFilteredRows.length
return (
<input
value={filterValue || ''}
onChange={(e) => {
setFilter(e.target.value || undefined)
}}
Placeholder={`Фильтр ${count} записи`}
/>
)
}этотиндивидуальный Компонент получаеттрииндивидуальныйпараметр：
- filterValue: ввод пользователем значения фильтра.
- preFilteredRows: фильтровать предварительно отфильтрованные строки.
- setFilter: используется для установки значений пользовательской фильтрации.
После определения компонента фильтра мы также TextFilter входящийприезжатьодининдивидуальный defaultColumn середина:
const defaultColumn = React.useMemo(
() => ({
Filter: TextFilter,
}),
[]
)Тогда сделай это снова defaultColumn входящий useTable：
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
+ defaultColumn,
},
useFilters,
)
Здесь мы обнаружили проблему: при нажатии на поле ввода фильтра,изменю сортировку,этот是因为改变сортироватьиз Событие щелчка помещаетсясуществовать <th>,Поэтому нам нужно предотвратить попадание этого отдельного поля ввода из события щелчка на внешний слой:
- <div>
+ <div onClick={(e) => e.stopPropagation()}>
{column.canFilter ? column.render('Filter') : null}
</div>Так же,Если вы хотите отключить определенный столбец из фильтра,Можно установить disableFilters：
const columns = useMemo(
() => [
{
Header: 'номер заказа',
accessor: 'order',
sortType: 'basic'
},
{
Header: 'Имя',
accessor: 'name',
+ disableFilters: true,
},
{
Header: 'Адрес доставки',
accessor: 'address'
},
{
Header: 'Дата заказа',
accessor: 'date',
}
],
[]
)офильтр Функция更多详细细节参见документ：useFilters。
Дальнейшее чтение:《Лучше всего использоватьиз 8 оплата React Datepicker Оценка и рекомендации по выбору времени и даты》
Функция подкачки таблицы React Table
Использование функции пейджинга usePagination этотиндивидуальный hooks выполнить:
import { useTable, usePagination } from 'react-table' затем в useTable середина添加точка Страница Связанныйизпараметр：
const {
getTableProps,
headerGroups,
getRowProps,
- rows
+ state: { pageIndex, pageSize },
+ canPreviousPage,
+ canNextPage,
+ previousPage,
+ nextPage,
+ pageOptions,
+ page
} = useTable(
{
columns,
data,
+ initialState: { pageSize: 2 },
},
+ usePagination,
)тогда мы tbody серединаиз rows будет из page Получить из переменной:
<tbody {...getTableBodyProps()}>
- {rows.map((row) => {
+ {page.map((row) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>我们还需要构建одининдивидуальныйточка Страницаустройство：
function Pagination({
canPreviousPage,
canNextPage,
previousPage,
nextPage,
pageOptions,
pageIndex
}) {
return (
<div>
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
Предыдущая страница
</button>{' '}
<button onClick={() => nextPage()} disabled={!canNextPage}>
Следующая страница
</button>
<div>
Нет. {' '}
<em>
{pageIndex + 1} / {pageOptions.length}
</em>{' '}
Страница
</div>
</div>
)
}существовать table 后面使用этотиндивидуальныйточка Страницаустройство：
<>
<table {...getTableProps()}>...
</table>
<Pagination
canPreviousPage={canPreviousPage}
canNextPage={canNextPage}
previousPage={previousPage}
nextPage={nextPage}
pageOptions={pageOptions}
pageIndex={pageIndex}
/>
</>Эффект отображения следующий:
более сложныйизточка Страница Вы можете обратиться к официальному примеру：Examples: Pagination。
Дальнейшее чтение:《Лучше всего использоватьиз 5 индивидуальный React select Оценка и рекомендации компонентов раскрывающегося меню с множественным выбором》
Сортировка таблиц React, фильтрация поиска, пример кода подкачки
В предыдущей статье мы имеем реакцию-таблицу из Было продемонстрировано базовое использование, вы можете получить пример кода здесь.
Практический пример таблицы React
Однако в реальном развитии потребности, естественно, не будут удовлетворяться местными данными.,Итак, далее мы продемонстрируем более реальный и полный пример индивидуального,Он будет содержать следующие функции:
- Имитируйте запрос данных с удаленного конца и выполняйте разбиение по страницам, фильтрацию и сортировку на сервере.
- Создание компонентов с помощью Material-UI
Сначала создайте новый индивидуальный проект:
npx create-react-app react-table-example
cd react-table-exampleЗатем установите связанные зависимости:
npm i react-table mockjs axios lodash.orderby
npm i axios-mock-adapter --save-dev
npm i @material-ui/core @material-ui/iconsМок API
тогда мыгенерировать 200 Данные заказа, одновременно API из фильтра、сортироватьиточка Страница Функция：
// mock.js
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import Mock from 'mockjs'
import _orderby from 'lodash.orderby'
const { Random, mock } = Mock
const orders = new Array(200).fill(null).map(() => {
return mock({
order: Random.natural(),
name: Random.cname(),
address: Random.province() + '-' + Random.city() + '-' + Random.county(),
date: Random.date()
})
})
const mockAPI = {
start() {
const mock = new MockAdapter(axios)
mock.onGet('/api/orders').reply((config) => {
let { filter, sortBy, page = 0, size = 10 } = config.params || {}
let mockOrders = [...orders]
if (filter) {
mockOrders = orders.filter((order) => {
return Object.values(order).some((value) => value.includes(filter))
})
}
if (sortBy.length) {
sortBy.forEach((sort) => {
mockOrders = _orderby(
mockOrders,
[sort.id],
[sort.desc ? 'desc' : 'asc']
)
})
}
const offset = page * size
mockOrders = mockOrders.slice(offset, offset + size)
return new Promise((resolve) => {
setTimeout(() => {
resolve([
200,
{
data: mockOrders,
total_count: orders.length
}
])
}, 500)
})
})
}
}
export default mockAPIзатем в App.js Импортируйте и запускайте mock данные:
import mockAPI from './mock'
mockAPI.start()Создание базового компонента React Table
Имея вышеописанный опыт, мы можем быстро построить базовую таблицу Компоненты:
// components/Table.js
import React from 'react'
import { useTable } from 'react-table'
import MaUTable from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableContainer from '@material-ui/core/TableContainer'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
function Table({ columns, data }) {
const { getTableProps, headerGroups, prepareRow, rows } = useTable({
columns,
data
})
return (
<TableContainer>
<MaUTable {...getTableProps()}>
<TableHead>
{headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<TableCell {...column.getHeaderProps()}>
{column.render('Header')}
</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody>
{rows.map((row, i) => {
prepareRow(row)
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
)
})}
</TableRow>
)
})}
</TableBody>
</MaUTable>
</TableContainer>
)
}
export default Tableзатем в App.js запрос API и покажите:
import React, { useState, useMemo, useEffect } from 'react'
import axios from 'axios'
import Table from './components/Table'
import mockAPI from './mock'
mockAPI.start()
function App() {
const fetchOrders = async (params = {}) => {
return axios.get('/api/orders', { params }).then((res) => {
const resp = res.data
setOrders(resp.data)
})
}
const [orders, setOrders] = useState([])
const data = useMemo(() => {
return [...orders]
}, [orders])
const columns = useMemo(
() => [
{
Header: 'номер заказа',
accessor: 'order'
},
{
Header: 'Имя',
accessor: 'name'
},
{
Header: 'Адрес доставки',
accessor: 'address'
},
{
Header: 'Дата заказа',
accessor: 'date'
}
],
[]
)
useEffect(() => {
fetchOrders()
}, [])
return (
<div style={{ padding: '20px' }}>
<h1>React Table Example —— Караюн(https://kalacloud.com)</h1>
<Table data={data} columns={columns} />
</div>
)
}
export default AppЭффект отображения следующий:
Пейджинг на стороне сервера
Затем мы добавляем функцию подкачки, сначала добавляем TablePaginationActions Компоненты:
// components/TablePaginationActions.js
import React from 'react'
import FirstPageIcon from '@material-ui/icons/FirstPage'
import IconButton from '@material-ui/core/IconButton'
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
import LastPageIcon from '@material-ui/icons/LastPage'
import { makeStyles, useTheme } from '@material-ui/core/styles'
const useStyles = makeStyles((theme) => ({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5)
}
}))
const TablePaginationActions = (props) => {
const classes = useStyles()
const theme = useTheme()
const { count, page, rowsPerPage, onPageChange } = props
const handleFirstPageButtonClick = (event) => {
onPageChange(event, 0)
}
const handleBackButtonClick = (event) => {
onPageChange(event, page - 1)
}
const handleNextButtonClick = (event) => {
onPageChange(event, page + 1)
}
const handleLastPageButtonClick = (event) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
}
return (
<div className={classes.root}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === 'rtl' ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === 'rtl' ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
)
}
export default TablePaginationActionsзатем в Table.js Модификация заключается в следующем:
import React, { useEffect } from 'react'
import { useTable, usePagination } from 'react-table'
+ import TableFooter from '@material-ui/core/TableFooter'
+ import TablePagination from '@material-ui/core/TablePagination'
+ import TablePaginationActions from './TablePaginationActions'
- function Table({ columns, data }) {
+ function Table({ columns, data, totalCount, onStateChange }) {
const {
getTableProps,
headerGroups,
prepareRow,
- rows,
+ page,
+ gotoPage,
+ setPageSize,
+ state: { pageIndex, pageSize }
} = useTable(
{
columns,
data,
+ manualPagination: true,
+ pageCount: totalCount
},
+ usePagination
)
+ useEffect(() => {
+ onStateChange({ pageIndex, pageSize })
+ }, [pageIndex, pageSize, onStateChange])
+ const handleChangePage = (event, newPage) => {
+ gotoPage(newPage)
+ }
+ const handleChangeRowsPerPage = (event) => {
+ setPageSize(Number(event.target.value))
+ }
return (
<TableContainer>
<MaUTable {...getTableProps()}>
...
<TableBody>
- {rows.map((row, i) => {
+ {page.map((row, i) => {
...
</TableBody>
+ <TableFooter>
+ <TableRow>
+ <TablePagination
+ rowsPerPageOptions={[5, 10, 15, 20]}
+ colSpan={3}
+ count={totalCount}
+ rowsPerPage={pageSize}
+ page={pageIndex}
+ SelectProps={{
+ inputProps: { 'aria-label': 'rows per page' },
+ native: true
+ }}
+ onPageChange={handleChangePage}
+ onRowsPerPageChange={handleChangeRowsPerPage}
+ ActionsComponent={TablePaginationActions}
+ />
+ </TableRow>
+ </TableFooter>
</MaUTable>
</TableContainer>
)
}
export default Tableсуществовать App.js середина增加控制точка Страницаизлогика：
const [totalCount, setTotalCount] = useState(0)
const fetchOrders = async (params = {}) => {
return axios.get('/api/orders', { params }).then((res) => {
const resp = res.data
setOrders(resp.data)
setTotalCount(resp.total_count)
})
}
const onStateChange = useCallback(({ pageIndex, pageSize }) => {
fetchOrders({
page: pageIndex,
size: pageSize
})
}, [])потому что Table Он будет запущен внутри компонента onStateChange,Поэтому нет необходимостисуществовать useEffect Получить данные из ,Затемвходящий Table Связанные свойства:
- useEffect(() => {
- fetchOrders()
- }, [])
<Table
data={data}
columns={columns}
+ totalCount={totalCount}
+ onStateChange={onStateChange}
/>Эффект отображения следующий:
Сортировка на стороне сервера
Затем мы добавляем функцию сортировки, сначала модифицируем Table.js：
- import { useTable, usePagination } from 'react-table'
+ import { useTable, usePagination, useSortBy } from 'react-table'
+ import TableSortLabel from '@material-ui/core/TableSortLabel'
function Table({ columns, data, totalCount, onStateChange }) {
const {
getTableProps,
headerGroups,
prepareRow,
page,
gotoPage,
setPageSize,
- state: { pageIndex, pageSize }
+ state: { pageIndex, pageSize, sortBy }
} = useTable(
{
columns,
data,
manualPagination: true,
+ manualSortBy: true,
pageCount: totalCount
},
+ useSortBy,
usePagination
)
- useEffect(() => {
- onStateChange({ pageIndex, pageSize })
- }, [pageIndex, pageSize, onStateChange])
+ useEffect(() => {
+ onStateChange({ pageIndex, pageSize, sortBy })
+ }, [pageIndex, pageSize, sortBy, onStateChange])
<TableCell
- {...column.getHeaderProps()}
+ {...column.getHeaderProps(column.getSortByToggleProps())}
>
{column.render('Header')}
+ <TableSortLabel
+ active={column.isSorted}
+ direction={column.isSortedDesc ? 'desc' : 'asc'}
+ />
</TableCell>
}React table Функция сортировки Эффект отображения следующий:
Дальнейшее чтение:《React выполнить PDF Предварительный просмотр строки существования файла - Научим вас шаг за шагом писать React PDF Функция предварительного просмотра》
Фильтрация поиска на стороне сервера
тогда Мы Добавьте функцию фильтра, обычно фильтры расположены за пределами таблицы из существования. В этом примере мы ищем существование и вводим значение поиска в поле фильтра, чтобы применить существование ко всем из столбцов, здесь мы создаем индивидуальный TableFilter Компоненты:
// components/TableFilter.js
import React from 'react'
import InputBase from '@material-ui/core/InputBase'
import { fade, makeStyles } from '@material-ui/core/styles'
import SearchIcon from '@material-ui/icons/Search'
const useStyles = makeStyles((theme) => ({
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25)
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 'auto'
}
},
searchIcon: {
width: theme.spacing(7),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
inputRoot: {
color: 'inherit'
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: 200
}
}
}))
const GlobalFilter = ({ globalFilter, setGlobalFilter }) => {
const classes = useStyles()
return (
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
value={globalFilter || ''}
onChange={(e) => {
setGlobalFilter(e.target.value || undefined)
}}
Placeholder={`существовать это входное значение поиска`}
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
)
}
export default GlobalFilterзатем в Table.js Используйте эти отдельные компоненты и добавьте логику фильтрации:
- import { useTable, usePagination, useSortBy } from 'react-table'
+ import { useTable, usePagination, useSortBy, useGlobalFilter } from 'react-table'
+ import TableFilter from './TableFilters'
function Table({ columns, data, totalCount, onStateChange }) {
const {
getTableProps,
headerGroups,
prepareRow,
page,
gotoPage,
setPageSize,
- state: { pageIndex, pageSize, sortBy }
+ state: { pageIndex, pageSize, sortBy, globalFilter },
+ setGlobalFilter
} = useTable(
{
columns,
data,
manualPagination: true,
manualSortBy: true,
+ manualGlobalFilter: true,
pageCount: totalCount
},
+ useGlobalFilter,
useSortBy,
usePagination
)
useEffect(() => {
- onStateChange({ pageIndex, pageSize, sortBy })
+ onStateChange({ pageIndex, pageSize, sortBy, filter: globalFilter })
- }, [pageIndex, pageSize, sortBy, onStateChange])
+ }, [pageIndex, pageSize, sortBy, onStateChange, globalFilter])
<TableContainer>
+ <TableFilter
+ globalFilter={globalFilter}
+ setGlobalFilter={setGlobalFilter}
+ /> существовать App.js Получить в filter значение и передано API：
const onStateChange = useCallback(
- ({ pageIndex, pageSize, sortBy }) => {
+ ({ pageIndex, pageSize, sortBy, filter }) => {
fetchOrders({
page: pageIndex,
size: pageSize,
sortBy,
+ filter
})
},
[]
)react-table Поиск Фильтр Фильтр Эффект отображения следующий:
Дальнейшее чтение：《5оплата React Рекомендации и оценка компонента уведомления о сообщениях в режиме реального времени (Сообщение/Уведомление)》
Компонент React Table и облако Kara
Ранее мы показали, как существуют react-table Среднее совпадение Material-UI Создайте индивидуальный комплект из компонентов формы, я думаю, вы уже начали это делать. react-table изusage, и это просто react-table Функции — это лишь верхушка айсберга, их больше, например: столбцы динамического отображения, расширение групп, анимация, перетаскивание, встроенное редактирование, виртуальные списки и т. д., поэтому react-table ИзPowerful позволяет разрабатывать более индивидуальные функции.
На самом деле, если вы просто хотите сосредоточиться на решении проблем,и не хочу тратить время на отладку проблем интерфейса,Рекомендуется использовать Караюн,Караюн是新один代低代码开发工具,Не только можеттащитьгенерировать带有сортировать、точка Страница、搜索Функцияизлисткомпонентыждать多种你需要извнешний интерфейскомпоненты。与各类внешний интерфейс框架相比,Караюну вообще не нужно писать код интерфейса,Значительно повышена эффективность разработки,1 Еженедельная нагрузка, сейчас существует до тех пор, пока 30 Это можно сделать за считанные минуты. Вы можете начать использовать Kara Cloud, зарегистрировавшись напрямую. После настройки бэкэнда вы можете одним щелчком мыши поделиться им с коллегами.
可один键точка享给同事один起使用：https://my.kalacloud.com/apps/q6p23cqa29/published
Караюн может помочь вам быстро создать внутренние инструменты предприятия.,На рисунке ниже показано использование Караюн для построения внутренней системы мониторинга рекламы.,Не нужно знать интерфейс,Просто перетащите компоненты,10 Готово за считанные минуты. Вы также можете быстро создать собственный набор инструментов управления серверной частью.
Караюн是新один代低代码开发平台,与внешний интерфейс框架 По сравнению с Vue, React и т. д. преимущество Караюнизсуществовать в том, что вам не нужно предварительно настраивать среду разработки, вы можете напрямую зарегистрироваться и начать ее использовать. Разработчикам вообще не нужно решать какие-либо проблемы с интерфейсом. Они могут быстро сгенерировать необходимые компоненты простым перетаскиванием и получить доступ к общим базам данных и базам данных одним щелчком мыши. API, следуйте инструкциям, чтобы соединить переднюю и заднюю части за несколько простых шагов, и время разработки сократится до нескольких недель. 1 小时。Бесплатно сейчасПопробуйте Караюн。
RasaGpt — платформа чат-ботов на основе Rasa и LLM.
Nomic Embed: воспроизводимая модель внедрения SOTA с открытым исходным кодом.
Улучшение YOLOv8: EMA основана на эффективном многомасштабном внимании, основанном на межпространственном обучении, и эффект лучше, чем у ECA, CBAM и CA. Малые цели имеют очевидные преимущества | ICASSP2023
Урок 1 серии Libtorch: Тензорная библиотека Silky C++
Руководство по локальному развертыванию Stable Diffusion: подробные шаги и анализ распространенных проблем
Полностью автоматический инструмент для работы с видео в один клик: VideoLingo
Улучшения оптимизации RT-DETR: облегченные улучшения магистрали | Support Paddle облегченный rtdetr-r18, rtdetr-r34, rtdetr-r50, rtdet
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | Деформируемое внимание с большим ядром (D-LKA Attention), большое ядро свертки улучшает механизм внимания восприимчивых полей с различными функциями
Создано Datawhale: выпущено «Руководство по тонкой настройке развертывания большой модели GLM-4»!
7B превышает десятки миллиардов, aiXcoder-7B с открытым исходным кодом Пекинского университета — это самая мощная модель большого кода, лучший выбор для корпоративного развертывания.
Используйте модель Huggingface, чтобы заменить интерфейс внедрения OpenAI в китайской среде.
Оригинальные улучшения YOLOv8: несколько новых улучшений | Сохранение исходной информации — алгоритм отделяемой по глубине свертки (MDSConv) |
Второй пилот облачной разработки | Быстро поиграйте со средствами разработки на базе искусственного интеллекта
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция с нулевым кодированием и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
Решенная Ошибка | Загрузка PyTorch медленная: TimeoutError: [Errno 110] При загрузке факела истекло время ожидания — Cat Head Tiger
Brother OCR, библиотека с открытым исходным кодом для Python, которая распознает коды проверки.
Новейшее подробное руководство по загрузке и использованию последней демонстрационной версии набора данных COCO.
Выпущен отчет о крупной модели финансовой отрасли за 2023 год | Полный текст включен в загрузку |
Обычные компьютеры также могут работать с большими моделями, и вы можете получить личного помощника с искусственным интеллектом за три шага | Руководство для начинающих по локальному развертыванию LLaMA-3
Одной статьи достаточно для анализа фактора транскрипции SCENIC на Python (4)
Бросая вызов ограничениям производительности небольших видеокарт, он научит вас запускать большие модели глубокого обучения с ограниченными ресурсами, а также предоставит полное руководство по оценке и эффективному использованию памяти графического процессора!
Команда Fudan NLP опубликовала 80-страничный обзор крупномасштабных модельных агентов, в котором в одной статье представлен обзор текущего состояния и будущего агентов ИИ.
[Эксклюзив] Вы должны знать о новой функции JetBrains 2024.1 «Полнострочное завершение кода», чтобы решить вашу путаницу!
Краткое изложение базовых знаний о регистрации изображений 1.0
Новейшее подробное руководство по установке и использованию библиотеки cv2 (OpenCV, opencv-python) в Python.
Легко создайте локальную базу знаний для крупных моделей на основе Ollama+AnythingLLM.
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание решения. Повторная попытка с помощью файла (графическое руководство).
Одна статья поможет вам понять RAG (Retrival Enhanced Generation) | Введение в концепцию и теорию + практику работы с кодом (включая исходный код).
Эволюция архитектуры шлюза облачной разработки
