React data table component
Библиотека сделана на основе библиотеки @grossb/react-table
NOT_SELECTED | Не выбран |
INDETERMINATE | Неопреден. Используется для чекбокса - Выбрать все в заголовке таблицы. Используется, если выбраны некоторые значения из списка, но не все|
SELECTED | Выбран |
ASC | По возрастанию |
DESC | По убыванию |
SERVER = "server" | Режим сервера |
CLIENT = "client" | Режим клиента |
SERVER = "server" | Режим сервера |
CLIENT = "client" | Режим клиента |
DataItem - базовый тип объекта данных из массива data. Тип данных, который будет передаваться в массиве data, должен быть расширен от данного типа.
id: number \| string | Уникальные идентификатор объекта. Он используется как ключ для строк в таблице. |
[key: string]: any | Дополнительные поля объекта. |
FilterComponentProps - параметры, которые передаются в компоненты фильтрации
column: Column | Объект типа Column из массива columns |
allFilterData?: AllFilterData | Фильтры для всех столбцов |
columnFilterData?: FilterData | Фильтры для столбца column |
onSubmit: (data: any) => void | Функция, которая принимает объект с полями фильтра. Данный объект будет передаваться в filterComparator из column |
onReset: () => void | Функция сброса значений фильтров для столбца |
Column - тип, которые описывается все ячейки одного столбца.
id?: ColumnId | Унивальный идентификатор столбца. Необязательное поле. (string \| number ). |
dataField?: string | Поле объекта из которого будут браться данные для вывода в ячейку. Необязательный параметр. |
valueGetter?: (value: T) => ReactNode | Функция для преобазования данных с поля объекта для вывода в ячейку. Необязательный параметр. |
header?: ReactNode | Загловок столбца, которые будет выводится в Head таблицы.Необязательный параметр. |
headCellProps?: CellProps | Параметры ячейки в заголовке таблицы. Можно задать стили или класс и т.д. Необязательный параметр. |
bodyCellProps?: ((dataItem: T) => CellProps) \| CellProps | Параметры ячейки в тебе таблицы. Можно задать стили или класс и т.д. Принимается как функция, так и объект. Необязательный параметр.|
sortComparator?: SortComparator | Функция для сортировки данных в столбце. Чтобы сортировка работала, нужно для таблицы указать параметр sortable и указать данную функцию. Необязательный параметр.|
filterComparator?: FilterComparator | Функция фля фильтрации данных в таблице по столбцу. Функция получается как данные фильтра для конкретного столбца, так и фильтры для всех столбцов. Названия полей задаются пользователем в компоненте фильтра. Чтобы фильтрация работала, нужно для таблицы указать параметр filterable и указать данную функцию. Необязательный параметр. |
filterComponent?: ColumnFilterComponent | Компонент фильтра для столбца. Можно указать false, чтобы не отображать компонент фильтра для столбца, даже есть будет указан общий компонент фильтра в таблице. Необязательный параметр. |
ColumnId - это вычисляемое значение на основе объекта типа Column.
Column объявлено поле id, то ColumnId будет равно значению id
Column не объявлено поле id, но объявлено поле dataField, то ColumnId будет равно значению dataField
Column не объявлены поля id и dataField, то ColumnId будет равно значению undefined
SortingColumnOrder - описывает сортировку для столбца и порядок сортировки
column: Column | объект типа Column |
sortingOrder: SORTING_ORDER | значение из enum SORTING_ORDER |
data: Array | Массив данных для таблицы. Каждый объект должен наследовать тип от DataItem, чтобы компонент работал корректно |
columns: Array> | Массив объектов столбцов, которые описывают отдельно взятый столбец |
onRowClick?: (event: any, dataItem: T) => void | Событие нажатия на строку в теле таблицы |
selectable?: boolean | Включает возможность выбора строк в таблице при помощи чекбоксов. |
onSelectChange?: (selectedItems: Array) => void | Событие, которые вызывается при изменении выбора строк. Передает массив объектов из data, у которых стоит чекбокс |
onSortChange?: (sortingColumnOrder?: SortingColumnOrder) => void | Событие изменения сортировки. В объекте sortingColumnOrder содежиться объект столбца из columns и порядок сортировки из enum SORTING_ORDER|
sortable?: boolean | Включает возможность сортировки строк в таблицею Для работы сортировки необходимо передать данный параметр и реализовать sortComparator в объекте столбца из массива columns |
filterable?: boolean | Включает возможность фильтрации данных. Для работы фильтрации необходимо передать данный параметр, реализовать filterComparator в объекте столбца из массива columns и реализовать компонент фильтра, которые будет отображаться в заголовке таблицы. Компонент фильтра можно реализовать двумя способами: передать в объекте столбца из массива columns или передать общий компонент фильтра для всех столбцов через параметр commonFilterComponent |
defaultSortingColumnOrder?: SortingColumnOrder | Сортировка по умолчанию. В объекте необходимо указать column и sortingOrder, где column - это объект из columns, а sortingOrder - значение из enum SORTING_ORDER |
commonFilterComponent?: FilterComponent | Общий компонент фильтра для всех столбцов. Чтобы его переопределить или отключить для конкретного столбца, нужно в объекте из columns в поле filterComponent или передать нужный фильтр или передать false, чтобы отключить его. |
onFilterChange?: (allFilterData?: AllFilterData) => void | Событие изменения фильтров для столбцов. Передаются все значения фильтров. Ключом является ColumnId на основе объекта из columns, а значением - объект с полями из фильтра. |
sortingMode?: SORTING_MODE | Режим работы сортировки: server или client. В режиме client при изменении сортировки происходит сортировка данных на основе sortComparator из объекта типа Column и вызывается событие onSortChange. В режиме server только вызывается событие onSortChange. По умолчанию режим client|
filterMode?: FILTERING_MODE | Режим работы фильтрации: server или client. Принцип работы такой же, как и в sortingMode. Но используются функции filterComparator и onFilterChange соответственно. По умолчанию режим client |
rowProps?: ((dataItem: T) => RowProps) \| RowProps | Функция или объект для передачи параметров для строк. Например, если нужно в процессе работы передать стиль для одной строки. |
fixedTopTitle | Зафиксировать заголовок при скролле таблицы. (position: sticky) |
fixedLeftColumn | Зафиксировать левый столбец про горизонтальном скролле. (position: sticky) |
striped | Строки таблицы будут полосатыми. Одни темнее, другие светлее через одну. |
js
function alphabeticalSortComparator(a: T, b: T, sortingOrder: SORTING_ORDER, fieldName: keyof T) {
const res = a[fieldName].toLocaleLowerCase().localeCompare(b[fieldName].toLocaleLowerCase())
if (sortingOrder === SORTING_ORDER.DESC) {
return res * -1
}
return res
}
class User {
constructor(
public id: number,
public firstName: string,
public lastName: string,
public middleName: string,
public email: string,
) { }
get fullName() {
return ${this.lastName} ${this.firstName} ${this.middleName}
}
}
const columns: Array> = [
{
dataField: "fullName",
header: "ФИО",
headCellProps: {
width: 300
},
sortComparator: (a, b, sortingOrder) => alphabeticalSortComparator(a, b, sortingOrder, "fullName")
},
{
dataField: "email",
header: "Электронная почта",
headCellProps: {
width: 300
},
sortComparator: (a, b, sortingOrder) => alphabeticalSortComparator(a, b, sortingOrder, "email")
},
]
const data = [
new User(1, "string", "string", "string", "string@string.com"),
new User(2, "а", "а", "а", "a@a.com"),
new User(3, "test", "test", "test", "test@test.com"),
new User(4, "example", "example", "example", "example@example.com"),
new User(5, "Иван", "Иванов", "Иванович", "email@example.com"),
]
//////// DataTableExample.ts
selectable
filterable
sortable
striped
fixedTopTitle
data={data}
columns={columns}
/>
``