@grossb/react-data-table v0.4.6

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

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

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

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

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

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

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

DataItem

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

FilterComponentProps

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

Column

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

ColumnId

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

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

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

SortingColumnOrder

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

DataTableProps

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", "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

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