@yamada-ui/react/dist/types/components/table/table.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ReactNodeOrFunction, TransformProps } from "../../utils/index.types.js";
import { CSSProps } from "../../core/css/index.types.js";
import { GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { CheckboxProps } from "../checkbox/checkbox.js";
import { NativeTableRootProps, TbodyProps, TdProps, TfootProps, ThProps, TheadProps, TrProps } from "../native-table/native-table.js";
import * as react2657 from "react";
import { ReactElement } from "react";
import { AccessorFn, Cell, CellContext, ColumnDefTemplate, ColumnFiltersColumnDef, ColumnFiltersState, ColumnMeta, ColumnPinningColumnDef, ColumnSizingColumnDef, GlobalFilterColumnDef, GroupingColumnDef, Header, HeaderContext, HeaderGroup, PaginationState, Row, RowData, RowSelectionState, SortDirection, SortingColumnDef, Table, TableOptions, VisibilityColumnDef, createColumnHelper } from "@tanstack/react-table";

//#region src/components/table/table.d.ts
declare module "@tanstack/react-table" {
  interface ColumnDefExtensions<TData extends RowData, TValue = unknown> extends VisibilityColumnDef, ColumnPinningColumnDef, ColumnFiltersColumnDef<TData>, GlobalFilterColumnDef, SortingColumnDef<TData>, GroupingColumnDef<TData, TValue>, ColumnSizingColumnDef {}
  interface ColumnDefBase<TData extends RowData, TValue = unknown> extends ColumnDefExtensions<TData, TValue>, Pick<CSSProps, "lineClamp" | "truncated">, Pick<TdProps, "numeric"> {
    cell?: ColumnDefTemplate<CellContext<TData, TValue>>;
    footer?: ColumnDefTemplate<HeaderContext<TData, TValue>>;
    getUniqueValues?: AccessorFn<TData, unknown[]>;
    meta?: ColumnMeta<TData, TValue>;
    cellProps?: TdProps;
    footerProps?: ThProps;
    headerProps?: ThProps;
  }
}
interface ColumnSort<Y extends RowData> {
  id: keyof Y;
  desc: boolean;
}
type SortingState<Y extends RowData> = ColumnSort<Y>[];
interface OmittedTableOptions<Y extends RowData> extends Omit<TableOptions<Y>, "getCoreRowModel" | "onColumnFiltersChange" | "onPaginationChange" | "onSortingChange"> {}
interface PickedNativeTableProps extends Pick<NativeTableRootProps, "highlightOnHover" | "highlightOnSelected" | "layout" | "scrollAreaProps" | "size" | "stickyFooter" | "stickyHeader" | "striped" | "variant" | "withBorder" | "withColumnBorders" | "withScrollArea"> {}
interface TableProps<Y extends RowData> extends OmittedTableOptions<Y>, PickedNativeTableProps, Pick<CSSProps, "colorScheme" | "lineClamp" | "truncated"> {
  /**
   * The column filters state of the table.
   */
  columnFilters?: ColumnFiltersState;
  /**
   * The default column filters state of the table.
   */
  defaultColumnFilters?: ColumnFiltersState;
  /**
   * The default pagination state of the table.
   */
  defaultPagination?: PaginationState;
  /**
   * The default row selection state of the table.
   */
  defaultRowSelection?: RowSelectionState;
  /**
   * The default sorting state of the table.
   */
  defaultSorting?: SortingState<Y>;
  /**
   * If `true`, the table width will be automatically resized to the content.
   *
   * @default false
   */
  enableAutoResizeTableWidth?: boolean;
  /**
   * If `true`, the keyboard navigation will be enabled.
   *
   * @default true
   */
  enableKeyboardNavigation?: boolean;
  /**
   * If `true`, the pagination will be enabled.
   *
   * @default false
   */
  enablePagination?: boolean;
  /**
   * The footer of the table.
   */
  footer?: ReactNodeOrFunction<Table<Y>>;
  /**
   * The header of the table.
   */
  header?: ReactNodeOrFunction<Table<Y>>;
  /**
   * The initial focusable cell of the table.
   *
   * @default {rowIndex: 0, colIndex: 0}
   */
  initialFocusableCell?: {
    colIndex: number;
    rowIndex: number;
  };
  /**
   * The pagination state of the table.
   */
  pagination?: PaginationState;
  /**
   * The row selection state of the table.
   */
  rowSelection?: RowSelectionState;
  /**
   * If `true`, the row will be selected when the row is clicked.
   *
   * @default false
   */
  selectOnClickRow?: boolean;
  /**
   * The sorting state of the table.
   */
  sorting?: SortingState<Y>;
  /**
   * The sorting icon of the table.
   */
  sortingIcon?: ReactNodeOrFunction<false | SortDirection>;
  /**
   * If `true`, the table will have a checkbox column.
   *
   * @default true
   */
  withCheckbox?: boolean;
  /**
   * If `true`, the table will have a checkbox in the footer.
   *
   * @default false
   */
  withFooterCheckbox?: boolean;
  /**
   * If `true`, the table will have footer groups.
   *
   * @default false
   */
  withFooterGroups?: boolean;
  /**
   * The props for the table cell.
   */
  cellProps?: TransformProps<TdProps, Cell<Y, unknown>>;
  /**
   * The props for the checkbox.
   */
  checkboxProps?: CheckboxProps;
  /**
   * The props for the table footer group.
   */
  footerGroupProps?: TransformProps<TrProps, HeaderGroup<Y>>;
  /**
   * The props for the table footer.
   */
  footerProps?: TransformProps<ThProps, Header<Y, unknown>>;
  /**
   * The props for the table header checkbox.
   */
  headerCheckboxProps?: TransformProps<CheckboxProps, Header<Y, unknown>>;
  /**
   * The props for the table header group.
   */
  headerGroupProps?: TransformProps<TrProps, HeaderGroup<Y>>;
  /**
   * The props for the table header.
   */
  headerProps?: TransformProps<ThProps, Header<Y, unknown>>;
  /**
   * The props for the resizable trigger.
   */
  resizableTriggerProps?: TransformProps<Omit<ResizableTriggerProps, "resizing">, Header<Y, unknown>>;
  /**
   * The props for the table row checkbox.
   */
  rowCheckboxProps?: TransformProps<CheckboxProps, Row<Y>>;
  /**
   * The props for the table row.
   */
  rowProps?: TransformProps<TrProps, Row<Y>>;
  /**
   * The props for the sorting icon.
   */
  sortingIconProps?: TransformProps<Omit<SortingIconProps, "sorted">, Header<Y, unknown>>;
  /**
   * The props for the table.
   */
  tableProps?: NativeTableRootProps;
  /**
   * The props for the table tbody.
   */
  tbodyProps?: TbodyProps;
  /**
   * The props for the table tfoot.
   */
  tfootProps?: TfootProps;
  /**
   * The props for the table thead.
   */
  theadProps?: TheadProps;
  /**
   * The callback invoked when the column filters state changes.
   */
  onColumnFiltersChange?: (columnFilters: ColumnFiltersState) => void;
  /**
   * The callback invoked when the pagination state changes.
   */
  onPaginationChange?: (pagination: PaginationState) => void;
  /**
   * The callback invoked when the row is clicked.
   */
  onRowClick?: (row: Row<Y>) => void;
  /**
   * The callback invoked when the row is double clicked.
   */
  onRowDoubleClick?: (row: Row<Y>) => void;
  /**
   * The callback invoked when the sorting state changes.
   */
  onSortingChange?: (sorting: SortingState<Y>) => void;
}
declare const TablePropsContext: react2657.Context<Partial<TableProps<any>> | undefined>, useTablePropsContext: () => Partial<TableProps<any>> | undefined;
/**
 * `Table` is a table component equipped with column sorting, row selection, and click event features.
 *
 * @see https://yamada-ui.com/docs/components/table
 */
declare const Table$1: GenericsComponent<{
  <Y extends RowData>(props: TableProps<Y>): ReactElement;
}>;
interface SortingIconProps extends HTMLStyledProps<"button"> {
  sorted: false | SortDirection;
}
interface ResizableTriggerProps extends HTMLStyledProps {
  resizing: boolean;
}
//#endregion
export { Table$1 as Table, TableProps, TablePropsContext, createColumnHelper, useTablePropsContext };
//# sourceMappingURL=table.d.ts.map