Библиотека сделана на основе библиотеки @grossb/react-table

Описание типов

Перечисления (enum)

SELECT_STATUSES - Статус выбора

| Название | Описание | | :--------: | :------------------------: | | NOT_SELECTED | Не выбран | | INDETERMINATE | Неопреден. Используется для чекбокса - Выбрать все в заголовке таблицы. Используется, если выбраны некоторые значения из списка, но не все| | SELECTED | Выбран |

SORTING_ORDER - Порядок сортировки

| Название | Описание | | -------- | ------------------------ | | ASC | По возрастанию | | DESC | По убыванию |

SORTING_MODE - Режим работы сортировки

| Название | Описание | | -------- | ------------------------ | | SERVER = "server" | Режим сервера | | CLIENT = "client" | Режим клиента |

FILTERING_MODE - Режим работы фильтрации

| Название | Описание | | -------- | ------------------------ | | SERVER = "server" | Режим сервера | | CLIENT = "client" | Режим клиента |

DataItem

DataItem - базовый тип объекта данных из массива data. Тип данных, который будет передаваться в массиве data, должен быть расширен от данного типа.

| Название | Описание | | ------------- | -------------------------------- | | id: number \| string | Уникальные идентификатор объекта. Он используется как ключ для строк в таблице. | | [key: string]: any | Дополнительные поля объекта. |

FilterComponentProps

FilterComponentProps - параметры, которые передаются в компоненты фильтрации

| Название | Описание | | ------------- | -------------------------------- | | column: Column<T> | Объект типа Column из массива columns | | allFilterData?: AllFilterData | Фильтры для всех столбцов | | columnFilterData?: FilterData | Фильтры для столбца column | | onSubmit: (data: any) => void | Функция, которая принимает объект с полями фильтра. Данный объект будет передаваться в filterComparator из column | | onReset: () => void | Функция сброса значений фильтров для столбца |

Column

Column - тип, которые описывается все ячейки одного столбца.

| Название | Описание | | ------------- | -------------------------------- | | id?: ColumnId | Унивальный идентификатор столбца. Необязательное поле. (string \| number ). | | dataField?: string | Поле объекта из которого будут браться данные для вывода в ячейку. Необязательный параметр. | | valueGetter?: (value: T) => ReactNode | Функция для преобазования данных с поля объекта для вывода в ячейку. Необязательный параметр. | |header?: ReactNode | Загловок столбца, которые будет выводится в Head таблицы.Необязательный параметр. | | headCellProps?: CellProps | Параметры ячейки в заголовке таблицы. Можно задать стили или класс и т.д. Необязательный параметр. | | bodyCellProps?: ((dataItem: T) => CellProps) \| CellProps | Параметры ячейки в тебе таблицы. Можно задать стили или класс и т.д. Принимается как функция, так и объект. Необязательный параметр.| |sortComparator?: SortComparator<T> | Функция для сортировки данных в столбце. Чтобы сортировка работала, нужно для таблицы указать параметр sortable и указать данную функцию. Необязательный параметр.| |filterComparator?: FilterComparator<T> | Функция фля фильтрации данных в таблице по столбцу. Функция получается как данные фильтра для конкретного столбца, так и фильтры для всех столбцов. Названия полей задаются пользователем в компоненте фильтра. Чтобы фильтрация работала, нужно для таблицы указать параметр filterable и указать данную функцию. Необязательный параметр. | |filterComponent?: ColumnFilterComponent<T> | Компонент фильтра для столбца. Можно указать false, чтобы не отображать компонент фильтра для столбца, даже есть будет указан общий компонент фильтра в таблице. Необязательный параметр. |

ColumnId

ColumnId - это вычисляемое значение на основе объекта типа Column.

Принцип работы следующий:

1. Если в объекте типа Column объявлено поле id, то ColumnId будет равно значению id
2. Если в объекте типа Column не объявлено поле id, но объявлено поле dataField, то ColumnId будет равно значению dataField
3. Если в объекте типа Column не объявлены поля id и dataField, то ColumnId будет равно значению undefined

SortingColumnOrder

SortingColumnOrder - описывает сортировку для столбца и порядок сортировки

| Название | Описание | | ------------- | -------------------------------- | | column: Column<T> | объект типа Column | | sortingOrder: SORTING_ORDER | значение из enum SORTING_ORDER |

DataTableProps

| Название | Описание | | ------------- | -------------------------------- | | data: Array<T> | Массив данных для таблицы. Каждый объект должен наследовать тип от DataItem, чтобы компонент работал корректно | | columns: Array<Column<T>> | Массив объектов столбцов, которые описывают отдельно взятый столбец | | onRowClick?: (event: any, dataItem: T) => void | Событие нажатия на строку в теле таблицы | | selectable?: boolean | Включает возможность выбора строк в таблице при помощи чекбоксов. | | onSelectChange?: (selectedItems: Array<T>) => void | Событие, которые вызывается при изменении выбора строк. Передает массив объектов из data, у которых стоит чекбокс | | onSortChange?: (sortingColumnOrder?: SortingColumnOrder<T>) => void | Событие изменения сортировки. В объекте sortingColumnOrder содежиться объект столбца из columns и порядок сортировки из enum SORTING_ORDER| | sortable?: boolean | Включает возможность сортировки строк в таблицею Для работы сортировки необходимо передать данный параметр и реализовать sortComparator в объекте столбца из массива columns | | filterable?: boolean | Включает возможность фильтрации данных. Для работы фильтрации необходимо передать данный параметр, реализовать filterComparator в объекте столбца из массива columns и реализовать компонент фильтра, которые будет отображаться в заголовке таблицы. Компонент фильтра можно реализовать двумя способами: передать в объекте столбца из массива columns или передать общий компонент фильтра для всех столбцов через параметр commonFilterComponent | | defaultSortingColumnOrder?: SortingColumnOrder<T> | Сортировка по умолчанию. В объекте необходимо указать column и sortingOrder, где column - это объект из columns, а sortingOrder - значение из enum SORTING_ORDER | | commonFilterComponent?: FilterComponent<T> | Общий компонент фильтра для всех столбцов. Чтобы его переопределить или отключить для конкретного столбца, нужно в объекте из 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 | Строки таблицы будут полосатыми. Одни темнее, другие светлее через одну. |

CSS переменные

Описание CSS переменных находится тут

Пример использования

function alphabeticalSortComparator<T extends DataItem>(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<Column<User>> = [
  {
    dataField: "fullName",
    header: "ФИО",
    headCellProps: {
      width: 300
    },
    sortComparator: (a, b, sortingOrder) => alphabeticalSortComparator<User>(a, b, sortingOrder, "fullName")
  },
  {
    dataField: "email",
    header: "Электронная почта",
    headCellProps: {
      width: 300
    },
    sortComparator: (a, b, sortingOrder) => alphabeticalSortComparator<User>(a, b, sortingOrder, "email")
  },
]

const data = [
  new User(1, "string", "string", "string", "[email protected]"),
  new User(2, "а", "а", "а", "[email protected]"),
  new User(3, "test", "test", "test", "[email protected]"),
  new User(4, "example", "example", "example", "[email protected]"),
  new User(5, "Иван", "Иванов", "Иванович", "[email protected]"),
]

  //////// DataTableExample.ts

  <DataTable<User>
    selectable
    filterable
    sortable
    striped
    fixedTopTitle
    data={data}
    columns={columns}
  />