@react-to-styled/table/dist/table.d.ts

Table component with React and styled-components

/// <reference types="react" />
/// <reference types="styled-components" />
import React from "react";
interface PaginatorProps {
    onPagination: (page: number) => void;
    currentPage: number;
    totalRecords: number;
    pageLimit: number;
    isFetching: boolean;
}
declare const Paginator: ({ onPagination, currentPage, totalRecords, pageLimit, isFetching }: PaginatorProps) => JSX.Element;
/**
 * Table data.
 */
type TableData = Record<string, unknown>;
/**
 * Cell props representing `<td>` element.
 */
interface CellProps {
    /**
     * Function that if triggered with some data, it will show {@link ColumnData.ExpandedCell}
     */
    onRowExpand: (data?: TableData | boolean) => void;
    /**
     * Row data passed in Cell.
     */
    data: TableData;
    /**
     * Row index.
     */
    index: number;
}
/**
 * Column props representing `<th>` element.
 */
interface ColumnData {
    /**
     * Header content
     */
    header: string;
    /**
     * A Cell component that will be placed in this Column in every row.
     */
    Cell: (props: CellProps) => JSX.Element;
    /**
     * Optional width prop, used to limit the column width
     */
    width?: number;
    /**
     * Optional component that will render if {@link CellProps.onRowExpand} is triggered in Cell with some data.
     */
    ExpandedCell?: (props: Omit<CellProps, "onRowExpand">) => JSX.Element;
}
/**
 * Table props.
 */
interface TableProps extends React.ComponentPropsWithoutRef<"table"> {
    /**
     * Required data prop, should be array of objects.
     */
    data: TableData[];
    /**
     * Required columns prop, used to layout the content in cells and columns
     */
    columns: Record<string, ColumnData>;
    /**
     * Use it if you need pagination in Table footer.
     */
    paginationProps?: Omit<PaginatorProps, "isFetching">;
    /**
     * Renders Loader instead of table content.
     */
    isLoading?: boolean;
}
declare const Table: ({ data, columns, paginationProps, isLoading, ...props }: TableProps) => JSX.Element;
declare const TruncatedText: import("styled-components").StyledComponent<"div", any, {}, never>;
declare const Column: import("styled-components").StyledComponent<"td", any, {
    width?: number | string;
    isFirst?: boolean;
    isLast?: boolean;
}, never>;
declare const LoadingColumn: import("styled-components").StyledComponent<"td", any, {
    width?: number | string;
    isFirst?: boolean;
    isLast?: boolean;
}, never>;
export { CellProps, TableProps, Table, TruncatedText, Column, LoadingColumn, PaginatorProps, Paginator };