import React from 'react'; import PropTypes from 'prop-types'; import Body from './Body'; import Caption from './Caption'; import Cell, { CellClickHandler } from './Cell'; import Head from './Head'; import HeadCell, { HeadCellSortHandler } from './HeadCell'; import HeadDropdownCell, { HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestOpenHandler } from './HeadDropdownCell'; import Row, { RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowRequestToggleHandler } from './Row'; import { ComponentProps } from '../utils/types'; /** @public */ type TableRequestMoveColumnHandler = (data: { fromIndex: number; toIndex: number; }) => void; /** @public */ type TableRequestMoveRowHandler = (data: { fromIndex: number; toIndex: number; }) => void; /** @public */ type TableRequestResizeColumnHandler = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, data: { columnId?: string; id?: string; index: number; width: number; }) => void; /** @public */ type PinnedColumnsProp = { actions?: boolean; }; interface TablePropsBase { /** * Adds table-level actions. Not compatible with `onRequestResize`. */ actions?: React.ReactElement[]; /** * Specifies the width of the actions column. Adds an empty header for * row actions if no table-level actions are present. */ actionsColumnWidth?: number; /** * Must be `Table.Head`, `Table.Body`, or `Table.Caption`. */ children?: React.ReactNode; /** * Sets the offset from the top of the window. Only applies when `headType` * is 'docked'. */ dockOffset?: number; /** * Docks the horizontal scroll bar at the bottom of the window when the bottom of the * table is below the viewport. */ dockScrollBar?: boolean; /** * A React ref which is set to the DOM element when the component mounts and null when it unmounts. */ elementRef?: React.Ref; /** * Sets the table head type: * * * `docked`: The head is docked against the window * * `fixed` : The head is fixed in the table. The table can scroll * independently from the head. * * `inline`: The head isn't fixed, but can scroll with the rest of * the table. */ headType?: 'docked' | 'fixed' | 'inline'; /** * Controls how the Table handles horizontal content overflow: * * * `auto`: The default behavior for overflow. `HeadCell` content will truncate and `Cell` content will wrap. * The Table will scroll horizontally when the container's width exceeds the Table's width. * * `scroll`: The Table will scroll horizontally. `HeadCell` content will not truncate and `Cell` content will wrap only for word breaks. */ horizontalOverflow?: 'auto' | 'scroll'; /** * Style specification for the inner container, which is the scrolling container. */ innerStyle?: React.CSSProperties; /** * Callback invoked when a user clicks the row selection toggle in the header. */ onRequestToggleAllRows?: () => void; /** * Callback invoked when a scroll event occurs on the inner scrolling container. */ onScroll?: React.UIEventHandler; /** * Style specification for the outer container. */ outerStyle?: React.CSSProperties; /** * Optionally pin the actions column to the end of the table by passing `pinnedColumns={{ actions: true }}.` * When using pinned columns `horizontalOverflow` should be set to `scroll`. */ pinnedColumns?: PinnedColumnsProp; /** * Adds a column to the table with an expansion button for each row that has expansion * content. Supported values: * * * `single`: Only one row can be expanded at a time. If another expansion button is * clicked, the currently expanded row closes and the new one opens. * * `multi`: Allows multiple rows to be expanded at the same time. * * `controlled`: Allows the expanded state to be externally managed by `expanded` prop of `Row`. * * `none`: The default with no row expansion. */ rowExpansion?: 'single' | 'multi' | 'controlled' | 'none'; /** Indicates the column to use as the primary label for each row. */ primaryColumnIndex?: number; /** * When an `onRequestToggleAllRows` handler is defined, this prop determines the appearance * of the toggle all rows button. */ rowSelection?: 'all' | 'some' | 'none'; /** * Alternate rows are given a darker background to improve readability. */ stripeRows?: boolean; /** * The style attribute for the table. This is primarily useful for setting the CSS * table-layout property. */ tableStyle?: React.CSSProperties; /** * An event handler for handle the re-order action of Table. The function is passed an * options object with `fromIndex` and `toIndex`. */ onRequestMoveColumn?: TableRequestMoveColumnHandler; /** * An event handler to handle the reorder rows action of Table. The function is passed an * options object with `fromIndex` and `toIndex`. */ onRequestMoveRow?: TableRequestMoveRowHandler; /** * An event handler for resize of columns for the current column being resized. The function is passed an event and a data * object with `columnId`, `id`, `index`, and `width`. * Every Table.HeadCell must have a width prop when using onRequestResizeColumn. Table with resizableFillLayout supports width of "auto". */ onRequestResizeColumn?: TableRequestResizeColumnHandler; /** * Table will fill parent container. Resizable columns can have a `width` of `auto` only with this prop enabled. */ resizableFillLayout?: boolean; } type TableProps = ComponentProps; declare function Table({ actions, actionsColumnWidth, children, dockOffset, dockScrollBar, elementRef, headType, horizontalOverflow, innerStyle, onRequestMoveColumn, onRequestMoveRow, onRequestResizeColumn, onRequestToggleAllRows, onScroll, outerStyle, pinnedColumns, primaryColumnIndex, resizableFillLayout, rowExpansion, rowSelection, stripeRows, tableStyle, ...otherProps }: TableProps): React.JSX.Element; declare namespace Table { var propTypes: { actions: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>; actionsColumnWidth: PropTypes.Requireable; children: PropTypes.Requireable; dockOffset: PropTypes.Requireable; dockScrollBar: PropTypes.Requireable; elementRef: PropTypes.Requireable; headType: PropTypes.Requireable; horizontalOverflow: PropTypes.Requireable; innerStyle: PropTypes.Requireable; onRequestToggleAllRows: PropTypes.Requireable<(...args: any[]) => any>; onScroll: PropTypes.Requireable<(...args: any[]) => any>; outerStyle: PropTypes.Requireable; pinnedColumns: PropTypes.Requireable; primaryColumnIndex: PropTypes.Requireable; rowExpansion: PropTypes.Requireable; rowSelection: PropTypes.Requireable; stripeRows: PropTypes.Requireable; tableStyle: PropTypes.Requireable; onRequestMoveColumn: PropTypes.Requireable<(...args: any[]) => any>; onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>; onRequestResizeColumn: PropTypes.Requireable<(...args: any[]) => any>; resizableFillLayout: PropTypes.Requireable; }; var Body: typeof import("./Body").default; var Caption: typeof import("./Caption").default; var Cell: typeof import("./Cell").default; var Head: typeof import("./Head").default; var HeadCell: typeof import("./HeadCell").default; var HeadDropdownCell: typeof import("./HeadDropdownCell").default; var Row: typeof import("./Row").default; } export default Table; export { Body, Caption, Cell, Head, HeadCell, HeadDropdownCell, Row }; export type { CellClickHandler, HeadCellSortHandler, HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestOpenHandler, RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowRequestToggleHandler, TableRequestMoveColumnHandler, TableRequestMoveRowHandler, TableRequestResizeColumnHandler, PinnedColumnsProp, };