retro-react
Version:
A React component library for building retro-style websites
124 lines (123 loc) • 4.47 kB
TypeScript
/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
import { ComponentColors } from "../../utils/getColorScheme";
import { TableCell } from './Table.styled';
declare type TableCell = string | number | JSX.Element;
export declare type TableColors = ComponentColors | 'greyscale';
interface PaginationOptions {
/**
* The number of items to display on each page.
*
* @default 10
*/
pageSize: number;
/**
* The number of pages to display in the pagination component.
*
* @default 5
*/
initialPage?: number;
}
export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
/**
* An array of strings that will be used as the table headers.
*
* @default []
*/
headers: string[];
/**
* A two-dimensional array representing the content of the table. Each inner array represents a row, and each item within this array represents a
* cell within that row.
*
* @default []
*/
data: TableCell[][];
/**
* The color of the table. Accepts library colors. If this is not provided, the `greyscale` color will be used.
*
* @default 'greyscale'
*/
color?: TableColors;
/**
* A boolean that, if true, applies zebra-striping to the rows of the table.
*
* @default false
*/
striped?: boolean;
/**
* A boolean that, if true, adds borders around the cells of the table.
*
* @default true
*/
bordered?: boolean;
/**
* A function that is called when a user clicks on a row. It can be used to provide more interactivity, such as navigating to a different page or
* opening a modal with more information about the clicked row.
*
* @default undefined
*/
onRowClick?: (row: TableCell[]) => void;
/**
* An array that specifies the width of each column. For instance, ['20%', '30%', '50%'] would give the first column a width of 20%, the second
* column a width of 30%, and the third column a width of 50%.
*
* @default undefined
*/
columnWidths?: string[];
/**
* An array that specifies the alignment of each column. For instance, ['left', 'right', 'center'] would align the first column to the left, the
* second column to the right, and the third column to the center.
*
* @default 'left'
*/
columnAlign?: 'left' | 'center' | 'right' | 'justify' | ('left' | 'center' | 'right' | 'justify')[];
/**
* An object that specifies the pagination options for the table. If this is not provided, the default pagination options will be used.
*
* You need to pass in an object with the following properties: `pageSize` and `initialPage`.
*
* @default { pageSize: 10, initialPage: 1 }
*/
paginationOptions?: PaginationOptions;
/**
* A boolean that, if true, will render the table with pagination. This will render a pagination component below the table that allows the user to
* navigate between pages.
*
* @default false
*/
pagination?: boolean;
/**
* The maximum height of the table. If the table exceeds this height, it will become scrollable. This is useful if you want to render a table with a
* large number of rows. This is not virtualized.
*
* @default undefined
*/
maxHeight?: string;
/**
* Enable sorting on the table. This will render a sort icon on the table header. Clicking on the header will sort the table by that column.
*
* @default false
*/
sortable?: boolean;
sx?: ThemeUICSSObject;
}
/**
* A table component that can be used to display data in a tabular format. It supports pagination, zebra-striping, and row click events.
*
* Server-side pagination is currently not supported. If you need to use server-side pagination, you should use a different table component.
*
*
* @example
* <Table
* headers={['Name', 'Age', 'City']}
* data={[
* ['John', '30', 'New York'],
* ['Jane', '25', 'London'],
* ['Jack', '20', 'Paris'],
* ]}
* columnWidths={['20%', '30%', '50%']}
* columnAlign={['left', 'center', 'right']}
* />
*/
export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
export {};