Entities Table

Installation

pnpm add @cloud-ru/uikit-product-entities-table

Changelog

Обертка над серверной таблицей на базе AdaptiveServerTable и @tanstack/react-query.

Использование

import { useMemo } from 'react';

import { EntitiesTable } from '@cloud-ru/uikit-product-entities-table';
import { ColumnDefinition } from '@snack-uikit/table';

type Entity = {
  id: string;
  name: string;
  status: string;
  createdAt?: string;
};

type QueryParams = {
  params: {
    offset: number;
    limit: number;
    search?: string;
    ordering?: string;
  };
};

const columnDefinitions: ColumnDefinition<Entity>[] = [
  {
    id: 'name',
    accessorKey: 'name',
    header: 'Name',
    enableSorting: true,
  },
  {
    id: 'status',
    accessorKey: 'status',
    header: 'Status',
    enableSorting: true,
  },
  {
    id: 'createdAt',
    accessorKey: 'createdAt',
    header: 'Created at',
    enableSorting: true,
  },
];

export function Example() {
  const columns = useMemo(() => columnDefinitions, []);

  return (
    <EntitiesTable<Entity, QueryParams>
      id='entities-table'
      queryFn={useEntitiesQuery}
      columnDefinitions={columns}
      searchPlaceholder='Search entities'
      defaultLimit={10}
    />
  );
}

Props

| name | type | обязательный | описание | |------|------|--------------|----------| | id | string | да | Уникальный идентификатор таблицы для сохранения состояния. | | queryFn | (queryProps: P) => UseQueryResult<EntityListData<T>> | да | Query-хук, который возвращает данные таблицы в формате { total, data }. | | columnDefinitions | ColumnDefinition<T>[] | да | Описания колонок таблицы. | | queryProps | Omit<P, 'params'> | нет | Дополнительные параметры запроса, кроме параметров пагинации, поиска и сортировки. | | onQuerySuccess | () => void | нет | Вызывается после успешного выполнения запроса. | | onPaginationOrDataChange | (data: T[]) => void | нет | Вызывается при изменении параметров страницы или полученных данных. | | defaultSearch | string | нет | Начальное значение поиска. | | defaultOffset | number | нет | Начальное смещение пагинации. | | defaultLimit | number | нет | Начальный размер страницы. | | defaultSort | TableSortingState<T, P> | нет | Начальное состояние сортировки. | | searchPlaceholder | string | нет | Плейсхолдер поля поиска. | | columnFilters | ServerTableProps<T, P>['columnFilters'] | нет | Конфигурация серверных фильтров, которая пробрасывается во внутреннюю таблицу. |

README компонента