@wonderflow/react-components/dist/components/table/table.d.ts

UI components from Wonderflow's Wanda design system

import { ComponentType, ReactNode } from 'react';
import { IdType, Row, SortingRule } from 'react-table';
import { TableHeaderProps } from './table-header';
import { TablePaginationProps } from './table-pagination';
import { CustomColumnsType, CustomSortingRule, OptionalDataTypes, PaginationPageType } from './types';
export declare type TableProps<T extends Record<string, unknown>> = PropsWithClass & {
    /**
     * Define the columns and headers of the table.
     */
    columns: CustomColumnsType<T>;
    /**
     * Pass the data structure to the table. Each object key can be used as `accessor` for a column.
     */
    data: Array<T & OptionalDataTypes<T>>;
    /**
     * Define the default visibility of the columns. This is an array of columns `id`,
     */
    defaultHiddenColumns?: Array<IdType<T>>;
    /**
     * Enable row selection. This property will render an additiona column
     * at the start of the table, containing a checkbox.
     */
    selectableRows?: boolean;
    /**
     * The ids of the rows which are selected
     */
    selectedRowIds?: Array<IdType<T>>;
    /**
     * A function to trigger every time a row changes its selection status
     */
    onSelectedRowsChange?: (selectedRowIds: Array<IdType<T>>) => void;
    /**
     * Add an alternate style to the table rows
     */
    stripes?: boolean;
    /**
     * Set the loading state of the table. This will sho skeleton loaders instead of the actual data.
     */
    loading?: boolean;
    /**
     * Enable horizontal separators between the table rows
     */
    showSeparators?: boolean;
    /**
     * Add an accessible title to the table component
     */
    title?: TableHeaderProps['title'];
    /**
     * Hide the header which includes the title and controls.
     * This option is ignored and set to `true` if `selectableRows` is set to `true`.
     */
    showHeader?: boolean;
    /**
     * Hide the table header which includes columns names.
     */
    showTableHead?: boolean;
    /**
     * Enable the dropdown to choose the visibility of the column
     */
    columnsControl?: boolean;
    /**
     * Pass custom actions to the table header
     */
    actions?: ReactNode;
    /**
     * Set the label for selected items in the table. Default to "Selected items"
     */
    selectedLabel?: (selectedRowIds: Array<IdType<T>>) => ReactNode;
    /**
     * Pass custom components to show when rows are selected.
     */
    selectedActions?: (selectedRowIds: Array<IdType<T>>) => ReactNode;
    /**
     * Set the table height after which the table will scroll.
     */
    height?: string;
    /**
     * Set the table background color. This must be set if `height` is set because
     * the color is used as background for sticky headers.
     */
    background?: string;
    /**
     * A react component that add additional content when the row is expanded.
     * By passing this prop, the row will be expandable. If fuction is passed,
     * the function will be called with the `subRow` data and the function must return
     * a component.
     */
    expandableRowComponent?: ComponentType<T>;
    /**
     * Custom component/empty state to show when the table has no data or
     * all columns have been toggled off.
     */
    emptyComponent?: ReactNode;
    /**
     * Enable or disable the sub rows selection when the parent row is selected.
     */
    selectSubRows?: boolean;
    /**
     * Show pagination below the table. This is recommended only for tables with a lot of rows.
     */
    showPagination?: boolean;
    /**
     * The index of the page that should be set as active when the table is rendered.
     */
    initialPageIndex?: number;
    /**
      * The amount of entries to show for each page.
      */
    itemsPerPage?: number;
    /**
      * Set the number of pages to show in the pagination. Used only when doing manual pagination.
      */
    totalRows?: number;
    /**
      * Set clusters of items to show in a single page. These values are used to
      * compute the select options for the page size select.
      */
    pageClusters?: TablePaginationProps['clusters'];
    /**
      * The callback that is called when the active page index and page size change.
      * Passing this property will enable manual pagination,
      * disabling the automatic one.
      */
    onPaginationChange?: ({ pageIndex, pageSize }: PaginationPageType) => Promise<void> | void;
    /**
     * If true, disable the automatic column sorting of the table. Turn this on if you want to
     * to control the sorting yourself.
     */
    isManualSorted?: boolean;
    /**
     * Set the initial sorted column and order by passing column id and order.
     */
    initialSortBy?: Array<SortingRule<T>>;
    /**
      * Callback run when a column is sorted
      */
    onSortChange?: (sorting: Array<CustomSortingRule<T>>) => void;
    /**
     * Callback run on row expansion. Returns the expanded row data.
     */
    onRowExpandChange?: (row: Row<T>) => void;
};
export declare const Table: <T extends Record<string, unknown>>({ className, style, columns, data, selectableRows, selectedRowIds, onSelectedRowsChange, stripes, showSeparators, title, actions, selectedActions, selectedLabel, showHeader, showTableHead, columnsControl, defaultHiddenColumns, height, loading, background, expandableRowComponent, emptyComponent, showPagination, isManualSorted, itemsPerPage, totalRows, initialPageIndex, onPaginationChange, onSortChange, pageClusters, initialSortBy, onRowExpandChange, selectSubRows, ...otherProps }: TableProps<T>) => JSX.Element;
//# sourceMappingURL=table.d.ts.map