carbon-react
Version:
A library of reusable React components for easily building user interfaces.
46 lines (45 loc) • 2.57 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import * as DesignTokens from "@sage/design-tokens/js/base/common";
import { TagProps } from "../../__internal__/utils/helpers/tags";
export interface FlatTableProps extends MarginProps, TagProps {
/** The HTML id of the element that contains a description of this table. */
ariaDescribedby?: string;
/** A string to render as the table's caption */
caption?: string;
/** FlatTableHead and FlatTableBody */
children: React.ReactNode;
/** `FlatTable` color theme */
colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
/** Content to be rendered at the foot of the table */
footer?: React.ReactNode;
/** If true, the header does not scroll with the content */
hasStickyFooter?: boolean;
/** If true, the header does not scroll with the content */
hasStickyHead?: boolean;
/** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
height?: string | number;
/** Set the min-height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
minHeight?: string | number;
/** Toggles the zebra striping for the table rows */
isZebra?: boolean;
/** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
size?: "compact" | "small" | "medium" | "large" | "extraLarge";
/** Applies max-height of 100% to FlatTable if true */
hasMaxHeight?: boolean;
/** Toggles the visibility of the table's outer left and right borders. When false, the left border of the first column and the right border of the last column are hidden. */
hasOuterVerticalBorders?: boolean;
/** Sets the border radius of the first and last cells in the last row. */
bottomBorderRadius?: Extract<keyof typeof DesignTokens, `borderRadius${number}`>;
/** Set the overflow X of the table wrapper. Any valid CSS string */
overflowX?: string;
/** Width of the table. Any valid CSS string */
width?: string;
/** The title to describe the table when one or more tables are used on a single page */
title?: string;
}
export declare const FlatTable: {
({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, title, ...rest }: FlatTableProps): React.JSX.Element;
displayName: string;
};
export default FlatTable;