В этой статье мы увидим, как построить действующую таблицу данных с использованием таблицы RACT и Tailwindcss. Таблица данных является важным элементом пользовательского интерфейса для приборной панели приложения. Всегда важно знать, как создать надежную таблицу данных в разработке Frontend.
Что такое таблица данных?
Прежде чем идти в техническую часть этого. Давайте попробуем понять, что такое таблица данных, и почему важно в перспективе пользователя.
Таблица данных – это прозрачное представление списка данных. Это способ представления данных в рядах и столбцах.
Почему это важно?
Подумайте, что вы используете магазин электронной коммерции с онлайн-сервисами. Вы хотите увидеть ежемесячные заказы в приятном представленном формате, и вы также хотите знать от самого частых приобретенных товаров в определенном месяце.
Одним из традиционных подходов является управление всеми этими данными в листе Excel или Google. Вы все еще можете сделать это. Но он будет громоздким, как только он стал большим набором данных.
Вот роль таблиц данных. По сути, вы управляете всеми данными отчетов в таблице со всеми функциональными возможностями, такими как отсортированные порядок, вариант фильтрации и пагированные данные.
Это поможет вам максимально управлять вашими данными со всеми функциями.
Демонстрация
Здесь мы собираемся создать умную таблицу данных, где мы можем динамически добавлять строки в таблицу и добавлять/редактировать данные в самой таблице данных.
Настройка и установка
Здесь нам нужно клиентское приложение, которое будет иметь таблицу данных. Затем он отправляет данные на сервер, который сохраняет данные в лист Google.
Но эта статья в основном будет сосредоточиться на таблице создания данных с использованием таблицы RACT. Если вы хотите узнать, как интегрировать лист Google в Nodejs. Оформить заказ этого статья
Давайте создадим приложение React с использованием команды, Create-React-App
npx create-react-app client
Теперь у вас будет приложение React в вашем корневом каталоге.
После этого установите React-Table
который является безголовым интерфейсом для создания таблицы в реактивном приложении.
npm i react-table
Наконец, давайте устанавливаем Castrwindcss в ваше приложение React. Я не хочу идти глубоко в этом, потому что уже есть хорошо написанные учебные пособия по этой установке. Оформить заказ этого статья
Начиная
Во-первых, таблица содержит в основном строки и столбцы. То же самое идет для React Table. Таким образом, вам нужно пройти данные и столбцы в крючках RACT Table для рендеров столбцов и строк.
Давайте создадим компонент React Table, который принимает столбцы и строки – это аргумент для отображения таблицы.
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, например Таблица
, готовность
, Тобб
, TR
и тд
. Нам нужны некоторые свойства для этой семантики, чтобы заставить его работать должным образом. Например, чтобы создать пегирование или логику фильтра с нуля. Вам может потребоваться получить доступ к элементам HTML.
React-Table
Предоставляет это функциональные возможности из коробки. Для этого вам нужно отобразить реквизиты от исправленных крючков к вашим HTML-элементам.
Это цель реквизит от USETABLE
Крюк.Вы также могут переопределить эти свойства с вашим пользовательским. Некоторые из реквизитов являются GetTableProops
, GetTableDodyProops
и т.п.
Здесь у нас есть стол с GetTableProops
реквизит от реагированной таблицы сопоставлен с ним.
Таким образом, нам нужно сделать Thead
, Тобб
так далее
{headerGroups.map(headerGroup => ({headerGroup.headers.map(column => ( ))}{column.render("Header")} ))}
Важно отметить здесь, HeaderGroup
Возвращает заголовки, которые будут заголовками стола.
После этого мы оказываем Тобб
с той же образцом,
{rows.map((row, i) => { prepareRow(row) return ({row.cells.map(cell => { return ( ) })}{cell.render("Cell")} ) })}
Смотрите полный Таблица/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 () } export default Table{headerGroups.map(headerGroup => (
{headerGroup.headers.map(column => ( ))} {rows.map((row, i) => { prepareRow(row) return ({column.render("Header")} ))}{row.cells.map(cell => { return ( ) })}{cell.render("Cell")} ) })}
Давайте импортируем Таблица
Компонент внутри нашего родительского компонента и передает необходимые данные как реквизиты.
Добавьте следующий код в 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 () } export default App
Здесь у нас есть столбцы и строки, переданные в Таблица
компонент. Важно отметить, что это структура Колонны
множество. Содержит Заголовок
и Accessor
Отказ
Заголовок
это то, что мы оказываем внутри стола готовность
если ты помнишь,
{ 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 } export default EditableCell
Здесь мы передаем несколько ценностей и функционируйте как реквизиты. Давайте сломаемся один за другим,
- Значение – возвращает значение пользовательской ячейке, вам понадобится начальное значение, чтобы сделать его внутри компонента
- ROW – это возвращает значение строки, в которую вы вставляете ячейку в.
- Столбец – возвращает значение столбцов, в которые вы добавляете ячейку.
- UpdateMedDate – это реквизиты для обновления родительского компонента на мероприятии 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 () }, }, { Header: "Phone", accessor: "phone", Cell: EditableCell, }, ]
Если вы осторожно смотрите, мы вставили раскрывающиеся в том же, что мы реализовали пользовательский вход.
Поиск и фильтр
Наконец, вам необходимо реализовать функциональность поиска и фильтра для таблицы данных. Это будет просто, так как мы оказываем поиск и фильтруйте за пределами нашего столового компонента.
Нам не нужно реализовывать его внутри Таблица
Отказ Мы можем напрямую манипулировать нашим родительским компонентом и фильтровать данные на основе ввода поиска или фильтра.
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) } }
Заключение
Важно знать, как создать таблицу данных в вашей карьере вашей веб-разработки. Потому что вам может потребоваться реализовать его в какой-то момент времени в вашей жизни. Продолжайте изучать концепцию и практиковать многое, чтобы стать лучше на этом.
Исходный код
Оригинал: “https://dev.to/ganeshmani/how-to-build-an-actionable-data-table-with-react-table-and-tailwindcss-3891”