Юниверс DG SDK UI
v2.15.0

Интерфейс TableProps<T, C>

Свойства таблицы

interface TableProps<T = any, C = void> {
    addText: ReactNode;
    allowedSortDirections?: Record<string, TableSortDirection[]>;
    canAdd?: boolean;
    canCollapseLocked?: boolean;
    canDelete?: boolean;
    cellRenderer?: (props: TableCellRendererProps<T, C>) => ReactNode;
    cellViewType?:
        | CELL_VIEW_TYPE
        | (
            (
                column: TableColumn<T, C>,
                rowData: T,
                index: number,
            ) => CELL_VIEW_TYPE
        );
    checkedLockedRows?: number[];
    checkedRows?: number[];
    collapsedRowsText?: string;
    collapseText?: string;
    columnHeights?: { [key: string]: number };
    columns: TableColumn<T, C>[];
    columnWidths?: { [key: string]: number };
    customHeaderCheckbox?: ReactNode;
    data: T[];
    deleteText: ReactNode;
    disabledForCheckLockedRows?: number[];
    disabledForCheckRows?: number[];
    editableCell?: { id: string; index: number };
    editableCellRenderer?: TableEditableCellRenderer<T, C>;
    emptyTableRenderer?: (
        isLoading: boolean,
        emptyTableText: string,
    ) => ReactNode;
    emptyTableText?: string;
    expandText?: string;
    filterValues?: { [key: string]: any };
    getRowKey?: (row: T, index: number) => string;
    getRowType?: (rowIndex: number) => ROW_TYPE;
    hasCellPadding?: boolean;
    hasChecked?: boolean;
    hasHeader?: boolean;
    hasHeaderBg?: boolean;
    hasNavigation?: boolean;
    hasPagination?: boolean;
    hideLastRowBorder?: boolean;
    highlightedRows?: number[];
    isAutoHeightFill?: boolean;
    isAutoScrollToSelected?: boolean;
    isChangedAxes?: boolean;
    isEditable?: boolean;
    isGroupCompact?: boolean;
    isGrouped?: boolean;
    isHeaderCheckable?: boolean;
    isLoading?: boolean;
    isLockedCollapsed?: boolean;
    isLockedRowsCheckable?: boolean;
    isMultiselect?: boolean;
    isResizable?: boolean;
    isRowsCheckable?: boolean;
    isRowsSelectable?: boolean;
    isScrollOverflowAuto?: boolean;
    isSortable?: boolean;
    isStriped?: boolean;
    loadingText: string;
    lockedData?: T[];
    lockedRowActions?: (rowData: TableRowActionsProps<T>) => ReactNode;
    maxRowsBeforeOverflow?: number;
    noLockedLimit?: boolean;
    onAllCheck?: (isCheck: boolean) => void;
    onCellEdit?: (
        rowIndex: number,
        columnId: string,
        newValue: EditableCellValue,
        cancelEdit?: boolean,
    ) => void;
    onCellEditStart?: (rowIndex: number, columnId: string) => void;
    onChangeColumnHeight?: (columnId: string, newHeight: number) => void;
    onChangeColumnWidth?: (columnId: string, newWidth: number) => void;
    onCollapseLocked?: (isCollapsed: boolean) => void;
    onCopy?: (e: ClipboardEvent<HTMLDivElement>) => void;
    onFilter?: (columnId: string, isClear?: boolean) => void;
    onLockedRowCheck?: (
        rowIndex: number,
        isCheck: boolean,
        isShiftPressed?: boolean,
    ) => void;
    onLockedRowClick?: (
        rowIndex: number,
        e?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>,
    ) => void;
    onMove?: (sortEnd: TableSortEnd) => void;
    onPaste?: (
        e: ClipboardEvent<HTMLDivElement>,
        pastedData: TableOptionalData<string>,
    ) => void;
    onPasteError?: () => void;
    onResetFilter?: (columnId: string) => void;
    onRowAdd?: () => void;
    onRowCheck?: (
        rowIndex: number,
        isCheck: boolean,
        isShiftPressed?: boolean,
    ) => void;
    onRowClick?: (
        rowIndex: number,
        e?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>,
    ) => void;
    onRowDoubleClick?: (rowIndex: number, e: MouseEvent) => void;
    onRowMouseEnter?: (rowIndex: number, e: MouseEvent) => void;
    onRowMouseLeave?: (rowIndex: number, e: MouseEvent) => void;
    onRowsDelete?: (rowIndexes: number[]) => void;
    onSelectedDataChange?: (selectedData: TableNormalizedSelectedData) => void;
    onSelectedDataClear?: (selectedData: TableNormalizedSelectedData) => void;
    onSort?: (
        columnId: string,
        newSortDirection: TableSortDirection,
        currentSortDirection: TableSortDirection,
        columnData?: C,
    ) => void;
    rowActions?: (rowData: TableRowActionsProps<T>) => ReactNode;
    rowHeights?: { [key: string]: number };
    rowWidths?: { [key: string]: number };
    selectedData?: TableSelectedData;
    selectedRows?: number[];
    selectMode?: MULTIPLE_CELLS;
    sortDirection?: { [key: string]: TableSortDirection };
    unsetText: string;
}

Параметры типа

  • T = any
  • C = void

Иерархия

Индекс

Свойства

addText: ReactNode

Текст кнопки добавления.

allowedSortDirections?: Record<string, TableSortDirection[]>

Разрешенные направления сортировки по столбцам.

Параметр работает по следующим правилам:

  • Если параметр не задан — таблица работает как обычно, сортировка доступна для всех колонок.
  • Если объект пустой allowedSortDirections={{}} - таблица работает как обычно.
  • Если для колонки задан пустой массив allowedSortDirections={{colOne: []}} - сортировка для этой колонки запрещена.
  • В комбинации с sortDirection будет происходить проверка на наличие колонки из sortDirection в allowedSortDirections.

allowedSortDirections={{colOne: ['ASC', undefined]}} sortDirection={{colOne: 'DESC'}}.

  • Callback onSort без параметра allowedSortDirections работает как обычно.

Если параметр allowedSortDirections !== undefined, то onSort вызовется только если есть совпадение колонки из sortDirection в allowedSortDirections.

canAdd?: boolean

Разрешает добавление новых строк.

canCollapseLocked?: boolean

Разрешает сворачивать зафиксированные строки.

canDelete?: boolean

Разрешает удаление строк.

cellRenderer?: (props: TableCellRendererProps<T, C>) => ReactNode

Собственный рендерер ячейки таблицы.

Объявление типа

cellViewType?:
    | CELL_VIEW_TYPE
    | (
        (
            column: TableColumn<T, C>,
            rowData: T,
            index: number,
        ) => CELL_VIEW_TYPE
    )

Тип отображения ячеек или функция определения типа.

Параметры столбца.

Данные строки.

Индекс строки.

checkedLockedRows?: number[]

Индексы отмеченных зафиксированных строк.

checkedRows?: number[]

Индексы отмеченных строк.

collapsedRowsText?: string

Текст при свернутых строках.

collapseText?: string

Текст кнопки сворачивания.

columnHeights?: { [key: string]: number }

Текущие высоты столбцов.

columns: TableColumn<T, C>[]

Массив столбцов, определяющих структуру таблицы.

columnWidths?: { [key: string]: number }

Текущие ширины столбцов.

customHeaderCheckbox?: ReactNode

Свойство для кастомного рендеринга чекбокса в заголовке.

data: T[]

Данные для отображения в строках.

deleteText: ReactNode

Текст кнопки удаления.

disabledForCheckLockedRows?: number[]

Индексы зафиксированных строк, недоступных для отметки.

disabledForCheckRows?: number[]

Индексы строк, недоступных для отметки.

editableCell?: { id: string; index: number }

Параметры редактируемой ячейки.

editableCellRenderer?: TableEditableCellRenderer<T, C>

Собственный рендерер редактируемой ячейки таблицы.

emptyTableRenderer?: (isLoading: boolean, emptyTableText: string) => ReactNode

Функция рендера пустого состояния таблицы.

Объявление типа

    • (isLoading: boolean, emptyTableText: string): ReactNode
    • Параметры

      • isLoading: boolean

        Флаг загрузки.

      • emptyTableText: string

        Текст пустого состояния.

      Возвращает ReactNode

emptyTableText?: string

Текст пустого состояния.

expandText?: string

Текст кнопки разворачивания.

filterValues?: { [key: string]: any }

Значения фильтров для столбцов.

getRowKey?: (row: T, index: number) => string

Функция получения ключа для строки.

Объявление типа

    • (row: T, index: number): string
    • Параметры

      • row: T

        Данные строки.

      • index: number

        Индекс строки.

      Возвращает string

getRowType?: (rowIndex: number) => ROW_TYPE

Получение типа строки.

Объявление типа

    • (rowIndex: number): ROW_TYPE
    • Параметры

      • rowIndex: number

        Индекс строки.

      Возвращает ROW_TYPE

hasCellPadding?: boolean

Наличие отступов в ячейках.

hasChecked?: boolean

Включает ли таблица механизм отметки строк.

hasHeader?: boolean

Наличие заголовка таблицы.

hasHeaderBg?: boolean

Фон заголовка таблицы.

hasNavigation?: boolean

Наличие навигации.

hasPagination?: boolean

Наличие пагинации.

hideLastRowBorder?: boolean

Скрывать нижнюю границу последней строки.

highlightedRows?: number[]

Индексы подсвеченных строк.

isAutoHeightFill?: boolean

Автоматическое заполнение высоты контейнера.

isAutoScrollToSelected?: boolean

Автопрокрутка к выбранной строке.

isChangedAxes?: boolean

Признак изменения осей.

isEditable?: boolean

Доступно ли редактирование.

isGroupCompact?: boolean
isGrouped?: boolean
isHeaderCheckable?: boolean

Разрешает массовую отметку в заголовке.

isLoading?: boolean

Состояние загрузки таблицы.

isLockedCollapsed?: boolean

Запрет сворачивания при блокировке.

isLockedRowsCheckable?: boolean

Разрешает выбор заблокированных строк.

isMultiselect?: boolean

Включает режим множественного выбора.

Если selectMode задан, то текущее свойство игнорируется

isResizable?: boolean

Разрешено ли изменение размеров столбцов.

isRowsCheckable?: boolean

Разрешает выбор строк.

isRowsSelectable?: boolean

Включает выбор строк (для селекта).

Если selectMode задан, то текущее свойство игнорируется

isScrollOverflowAuto?: boolean

Включает автопрокрутку при переполнении.

isSortable?: boolean

Доступна ли сортировка.

isStriped?: boolean

Полосатое оформление строк.

loadingText: string

Текст статуса загрузки.

lockedData?: T[]

Зафиксированные строки таблицы.

lockedRowActions?: (rowData: TableRowActionsProps<T>) => ReactNode

Рендерер действий в зафиксированной строке.

Объявление типа

maxRowsBeforeOverflow?: number

Максимальное число строк до появления прокрутки.

noLockedLimit?: boolean

Отключает ограничение на количество зафиксированных строк.

onAllCheck?: (isCheck: boolean) => void

Отметка всех строк/снятие отметки.

Объявление типа

    • (isCheck: boolean): void
    • Параметры

      • isCheck: boolean

        Флаг отметки.

      Возвращает void

onCellEdit?: (
    rowIndex: number,
    columnId: string,
    newValue: EditableCellValue,
    cancelEdit?: boolean,
) => void

Обработчик редактирования ячейки.

Объявление типа

    • (
          rowIndex: number,
          columnId: string,
          newValue: EditableCellValue,
          cancelEdit?: boolean,
      ): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • columnId: string

        Идентификатор столбца.

      • newValue: EditableCellValue

        Новое значение ячейки.

      • OptionalcancelEdit: boolean

        Флаг отмены редактирования.

      Возвращает void

onCellEditStart?: (rowIndex: number, columnId: string) => void

Вызывается при начале редактирования ячейки.

Объявление типа

    • (rowIndex: number, columnId: string): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • columnId: string

        Идентификатор столбца.

      Возвращает void

onChangeColumnHeight?: (columnId: string, newHeight: number) => void

Изменение высоты столбца.

Объявление типа

    • (columnId: string, newHeight: number): void
    • Параметры

      • columnId: string

        Идентификатор столбца.

      • newHeight: number

        Новая высота.

      Возвращает void

onChangeColumnWidth?: (columnId: string, newWidth: number) => void

Изменение ширины столбца.

Объявление типа

    • (columnId: string, newWidth: number): void
    • Параметры

      • columnId: string

        Идентификатор столбца.

      • newWidth: number

        Новая ширина.

      Возвращает void

onCollapseLocked?: (isCollapsed: boolean) => void

Обработчик сворачивания зафиксированных строк.

Объявление типа

    • (isCollapsed: boolean): void
    • Параметры

      • isCollapsed: boolean

        Флаг сворачивания.

      Возвращает void

onCopy?: (e: ClipboardEvent<HTMLDivElement>) => void

Обработчик события копирования данных в буфер

onFilter?: (columnId: string, isClear?: boolean) => void

Обработчик фильтрации.

Объявление типа

    • (columnId: string, isClear?: boolean): void
    • Параметры

      • columnId: string

        Идентификатор столбца.

      • OptionalisClear: boolean

        Флаг очистки фильтра.

      Возвращает void

onLockedRowCheck?: (
    rowIndex: number,
    isCheck: boolean,
    isShiftPressed?: boolean,
) => void

Вызывается при отметке зафиксированной строки.

Объявление типа

    • (rowIndex: number, isCheck: boolean, isShiftPressed?: boolean): void
    • Параметры

      • rowIndex: number

        Индекс зафиксированной строки.

      • isCheck: boolean

        Флаг отметки.

      • OptionalisShiftPressed: boolean

        Флаг нажатия Shift.

      Возвращает void

onLockedRowClick?: (
    rowIndex: number,
    e?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>,
) => void

Клик по зафиксированной строке.

Объявление типа

    • (
          rowIndex: number,
          e?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>,
      ): void
    • Параметры

      • rowIndex: number

        Индекс зафиксированной строки.

      • Optionale: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>

        Событие мыши или клавиатуры.

      Возвращает void

onMove?: (sortEnd: TableSortEnd) => void

Обработчик перемещения строк.

Объявление типа

    • (sortEnd: TableSortEnd): void
    • Параметры

      • sortEnd: TableSortEnd

        Параметры окончания сортировки.

      Возвращает void

onPaste?: (
    e: ClipboardEvent<HTMLDivElement>,
    pastedData: TableOptionalData<string>,
) => void

Обработчик события вставки данных из буфера обмена

Объявление типа

onPasteError?: () => void

Обработчик события ошибки вставки данных из буфера обмена

onResetFilter?: (columnId: string) => void

Сброс фильтра для столбца.

Объявление типа

    • (columnId: string): void
    • Параметры

      • columnId: string

        Идентификатор столбца.

      Возвращает void

onRowAdd?: () => void

Обработчик добавления новой строки.

onRowCheck?: (
    rowIndex: number,
    isCheck: boolean,
    isShiftPressed?: boolean,
) => void

Вызывается при отметке строки.

Объявление типа

    • (rowIndex: number, isCheck: boolean, isShiftPressed?: boolean): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • isCheck: boolean

        Флаг отметки.

      • OptionalisShiftPressed: boolean

        Флаг нажатия Shift.

      Возвращает void

onRowClick?: (
    rowIndex: number,
    e?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>,
) => void

Клик по строке.

Объявление типа

    • (
          rowIndex: number,
          e?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>,
      ): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • Optionale: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>

        Событие мыши или клавиатуры.

      Возвращает void

onRowDoubleClick?: (rowIndex: number, e: MouseEvent) => void

Двойной клик по строке.

Объявление типа

    • (rowIndex: number, e: MouseEvent): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • e: MouseEvent

        Событие мыши.

      Возвращает void

onRowMouseEnter?: (rowIndex: number, e: MouseEvent) => void

Наведение курсора на строку.

Объявление типа

    • (rowIndex: number, e: MouseEvent): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • e: MouseEvent

        Событие мыши.

      Возвращает void

onRowMouseLeave?: (rowIndex: number, e: MouseEvent) => void

Уход курсора со строки.

Объявление типа

    • (rowIndex: number, e: MouseEvent): void
    • Параметры

      • rowIndex: number

        Индекс строки.

      • e: MouseEvent

        Событие мыши.

      Возвращает void

onRowsDelete?: (rowIndexes: number[]) => void

Обработчик удаления строк.

Объявление типа

    • (rowIndexes: number[]): void
    • Параметры

      • rowIndexes: number[]

        Индексы удаляемых строк.

      Возвращает void

onSelectedDataChange?: (selectedData: TableNormalizedSelectedData) => void

Обработчик изменений в выборе ячеек таблицы

Объявление типа

onSelectedDataClear?: (selectedData: TableNormalizedSelectedData) => void

Обработчик события удаления данных из выбранных ячеек

Срабатывает при нажатии клавиши "Delete"

Объявление типа

onSort?: (
    columnId: string,
    newSortDirection: TableSortDirection,
    currentSortDirection: TableSortDirection,
    columnData?: C,
) => void

Обработчик сортировки.

Объявление типа

    • (
          columnId: string,
          newSortDirection: TableSortDirection,
          currentSortDirection: TableSortDirection,
          columnData?: C,
      ): void
    • Параметры

      • columnId: string

        Идентификатор столбца.

      • newSortDirection: TableSortDirection

        Новое направление сортировки.

      • currentSortDirection: TableSortDirection

        Текущее направление сортировки.

      • OptionalcolumnData: C

        Данные столбца.

      Возвращает void

rowActions?: (rowData: TableRowActionsProps<T>) => ReactNode

Рендерер действий в строке.

Объявление типа

rowHeights?: { [key: string]: number }

Текущие высоты строк.

rowWidths?: { [key: string]: number }

Текущие ширины строк.

selectedData?: TableSelectedData

Данные о выбранных ячейках таблицы

Содержит полную информацию по выбранным ячейкам во всей таблице

Если selectMode не задан или задан как none, то данное свойство игнорируется

selectedRows?: number[]

Индексы выбранных строк.

Если selectMode задан, то текущее свойство игнорируется в пользу selectedData

selectMode?: MULTIPLE_CELLS

Режим выбора ячеек таблицы

undefined

sortDirection?: { [key: string]: TableSortDirection }

Текущее направление сортировки по столбцам.

unsetText: string

Текст "не установлено".