Привет всем 🙂
Создание таблицы в reactJS с возможностью выбора строк было самой большой проблемой для меня, поэтому я решил создать легкий пакет, который поможет мне.
Вы можете посетить его книгу онлайн здесь.
Содержание
Установка через NPM
npm install --save react-custable
Вам нужно только две переменные для конфигурации, column и data
import { Table } from 'react-custable';
//the fieldName should be as same as data's key
const column = [
{ fieldName: 'name', title: 'Name', width: '180px', sortable: true },
{ fieldName: 'email', title: 'Email', width: '180px', sortable: true },
];
const data = [
{ id: '1', name: 'name one', email: 'mailone@mail.com' },
{ id: '2', name: 'name two', email: 'mailtwo@mail.com' },
];
<div className="App">
<Table columns={columns} data={data} />
</div>;
что такое реквизит колонки?
‘fieldName’ — это ключевое имя ваших данных, а ‘title’ — это заголовок таблицы для этих данных, и они являются обязательными.
Дополнительная конфигурация столбцов
- ширина: вы можете назначить определенную ширину для каждого столбца
- sortable: эта таблица может сортировать данные столбцов, если они являются строкой
- sortFunc: если данные столбца не являются строкой, вы можете передать функцию, которая знает, как отсортировать ваши данные.
- fixed: если вы хотите зафиксировать столбец для горизонтальной прокрутки (работает только для первого или последнего столбца).
- render: если вы хотите отобразить пользовательский компонент, вы должны передать функцию, которая получает row (данные текущей строки) и index (индекс текущей строки) и ваша функция должна вернуть объект Cell.
{
value: React.ReactNode,
props: { [key: string]: string }, //props will be applied to td elemenet like colspan
}
| Опция | Тип | Описание |
|---|---|---|
| полеИмя* | строка | ключ данных |
| заголовок* | строка | заголовок колонки |
| ширина | строка(px) | ширина колонки (по умолчанию — авто) |
| фиксированный | строка (‘left’ или ‘right’) | зафиксировать колонку |
| сортируемый | булево | По умолчанию false |
| sortFunc | ( a , b ) => число | функция сортировки должна возвращать -1, если a < b, 1, если a > b, 0, если a = b |
| render | (row, index) => Cell | для рендеринга пользовательского компонента в ячейке |
Как вы видели ранее, ‘data’ и ‘column’ являются обязательными для таблицы, давайте посмотрим, что является необязательным для таблицы
| Опция | Тип | Описание |
|---|---|---|
| колонка* | Column[] | массив колонок |
| данные* | { id:string, … }[] | массив данных |
| isSelectable | булево | для включения флажков для строк |
| selectRowHandler | (selectedRowIds) => void | функция обратного вызова будет получать идентификаторы выбранных рядов |
| selectedRowKeys | string[] | значение по умолчанию для выбранных строк |
| пагинация | { currentPage: number; totalCount: number; pageLimit: number; } | значения для пагинации таблицы |
| pageChangeHandler | (pageNumner: number) => void | обратный вызов для обработки изменений страницы |
| rowClickHandler | (row: Row) => void | обратный вызов для обработки нажатия на строку |
| showLoading | булево | отображать спиннер над таблицей |
Внести свой вклад
это первая версия моего пакета, так что не стесняйтесь вносить свой вклад
https://github.com/barzin144/react-custable