@rws-air/webcomponents/dist/TableComponents/Table/index.d.ts

Standard Webcomponents for AIR projects

import { TableProps as MUITableProps } from '@mui/material/Table';
import { TablePaginationProps as MUITablePaginationProps } from '@mui/material/TablePagination';
import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
import React, { ReactNode } from 'react';
import { HeaderCellProps, HeaderProps } from '../HeaderCell';
import { PaginationProps } from '../Pagination';
import { ToolbarProps } from '../Toolbar';
export declare type TableLabels = Pick<ToolbarProps, 'searchplaceholderlabel'> & Pick<PaginationProps, 'labelRowsPerPage' | 'labelPaginationOf'> & Pick<HeaderCellProps, 'tooltiplabel'>;
export interface TableQAs {
    /** Data-qa applied to the root table */
    table: string;
    /** Data-qa applied to the pagination components */
    pagination: string;
    /**
     * Data-qa applied to the toolbar
     * @deprecated A toolbar in a table is more than a table should do.
     */
    toolbar: string;
    /** Data-qa applied to the header wrapper */
    header: string;
    /** Data-qa applied to the header row */
    headerRow: string;
    /** Data-qa applied to each header cell */
    headerCell: string;
    /** Data-qa applied to the table body wrapper */
    tableBody: string;
}
export interface TableCustomClasses {
    /** Custom class(es) for table */
    table?: string[];
    /**
     * Custom class(es) for table toolbar
     * @deprecated A toolbar in a table is more than a table component should do. See Toolbar component.
     */
    tableToolbar?: string[];
    /** Custom class(es) for table paginations */
    tablePagination?: string[];
    /** Custom class(es) for table pagination actions */
    tablePaginationActions?: string[];
    /** Custom class(es) for table header */
    tableHeader?: string[];
    /** Custom class(es) for table header row */
    tableHeaderRow?: string[];
    /** Custom class(es) for table header cell */
    tableHeaderCell?: string[];
    /** Custom class(es) for table body */
    tableBody?: string[];
    /**
     * Custom class(es) for table toolbar searchbar
     * @deprecated A toolbar in a table is more than a table component should do. See Toolbar component.
     */
    tableSearchbar?: string[];
}
export interface TableProps extends Pick<ToolbarProps, 'onsearchclear' | 'onsearchinput' | 'paperElevation' | 'extraIcons' | 'searchdebounce' | 'clearSearch'>, Pick<HeaderCellProps, 'onRequestSort' | 'orderby' | 'order' | 'tooltipplacement'>, Pick<MUITablePaginationProps, 'onPageChange' | 'onRowsPerPageChange'>, Pick<MUITablePaginationProps, 'rowsPerPage' | 'rowsPerPageOptions' | 'page' | 'onPageChange' | 'onRowsPerPageChange'>, MUITableProps {
    /** Headers for the table */
    headers: HeaderProps[];
    /** Map that defines how the headers are sorted, either by key or function when targeting nested properties */
    headermapping: Map<string, string>;
    /** The amount of rows for the table (generally the length of the data) */
    rowcount: number;
    /** Labels used in the table */
    labels: TableLabels;
    /** Data-qa's used in the table */
    tableqas: TableQAs;
    /** Content for the table */
    tablebodycontent: ReactNode;
    /** Customization CSS classes for table components */
    tablecss?: TableCustomClasses;
    /**
     * Control whether the top bar pagination should be shown
     * @default false
     */
    showTopPagination?: boolean;
    /**
     * Control whether the bottom bar pagination should be shown
     * @default false
     */
    showBottomPagination?: boolean;
    /**
     * The component used for displaying the actions.
     * Either a string to use a HTML element or a component.
     * @default TablePaginationActions
     */
    customPagination?: React.ElementType<TablePaginationActionsProps>;
    /**
     * Disables the table toolbar
     * @default false
     * @deprecated A toolbar in a table is more than a table component should do. See Toolbar component.
     */
    disableToolbar?: boolean;
    /** Additional props to pass to the Material UI Table component */
    TableProps?: MUITableProps;
    /** Additional props to pass to each of the Header cell components */
    HeaderCellProps?: HeaderCellProps;
    /**
     * Additional props to pass to the toolbar component
     * @deprecated A toolbar in a table is more than a table component should do. See Toolbar component.
     */
    ToolbarProps?: ToolbarProps;
    /** Additional props to pass the the pagination component */
    PaginationProps?: MUITablePaginationProps;
}
/**
 * Constructs a table using pre-defined Rijkswaterstaat styling
 * @param props Props to pass to the table
 * @example
 * ```jsx
 * <Table
 *   showBottomPagination
 *   showTopPagination
 *   paperElevation={1}
 *   onsearchclear={props.handleSearchClear}
 *   onsearchinput={props.handleSearchInput}
 *   onRequestSort={props.handleRequestSort}
 *   onPageChange={props.handleChangePage}
 *   onRowsPerPageChange={props.handleChangeRowsPerPage}
 *   tooltipplacement='bottom-start'
 *   order={props.tableOrder}
 *   orderby={props.tableOrderBy}
 *   rowsPerPage={props.tableRowsPerPage}
 *   rowsPerPageOptions={tableRowsPerPage}
 *   page={props.tablePage}
 *   headers={tableHeaders}
 *   headermapping={tableHeaderMapping}
 *   rowcount={props.data.length}
 *   labels={{
 *     labelPaginationOf: t('table.generic.pagination.of_label'),
 *     labelRowsPerPage: t('table.generic.pagination.rows_per_page'),
 *     searchplaceholderlabel: t('table.generic.searchLabel'),
 *     tooltiplabel: t('table.generic.sortTooltipLabel'),
 *   }}
 *   tableqas={{
 *     header: 'table-header',
 *     headerRow: 'table-header-row',
 *     pagination: 'table-pagination',
 *     table: 'table',
 *     toolbar: 'table-toolbar',
 *     headerCell: 'table-header-cell',
 *     tableBody: 'table-body',
 *   }}
 *   extraIcons={[
 *     {
 *       icon: <CloudDownload />,
 *       clickEvent: () => console.log('Clicked button!'),
 *       tooltipText: 'Tooltip on button',
 *     }
 *   ]}
 *   tablebodycontent={(
 *     <Fragment>
 *       {props.data
 *         .slice(props.tablePage * props.tableRowsPerPage, props.tablePage * props.tableRowsPerPage + Number(props.tableRowsPerPage))
 *         .map((item, index) => {
 *           return (
 *             <TableRow hover tabIndex={-1} key={index} data-qa='table-body-row'>
 *               <TableBodyCell content={item.name} />
 *               <TableBodyCell content={item.email} />
 *             </TableRow>
 *           );
 *         })
 *       }
 *     </Fragment>
 *   )}
 * />
 * ```
 */
export declare const Table: React.MemoExoticComponent<({ showTopPagination, showBottomPagination, disableToolbar, ...props }: TableProps) => JSX.Element>;
//# sourceMappingURL=index.d.ts.map