@primer/react/dist/DataTable/Table.d.ts

An implementation of GitHub's Primer Design System using React

import { PolymorphicProps } from "../utils/modern-polymorphic.js";
import { UniqueRow } from "./row.js";
import { CellAlignment, Column } from "./column.js";
import React, { JSX } from "react";

//#region src/DataTable/Table.d.ts
type TableProps = React.ComponentPropsWithoutRef<'table'> & {
  /**
   * Provide an id to an element which uniquely describes this table
   */
  'aria-describedby'?: string;
  /**
   * Provide an id to an element which uniquely labels this table
   */
  'aria-labelledby'?: string;
  /**
   * Column width definitions
   */
  gridTemplateColumns?: React.CSSProperties['gridTemplateColumns'];
  /**
   * Specify the amount of space that should be available around the contents of
   * a cell
   */
  cellPadding?: 'condensed' | 'normal' | 'spacious';
};
declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
  /**
   * Provide an id to an element which uniquely describes this table
   */
  'aria-describedby'?: string;
  /**
   * Provide an id to an element which uniquely labels this table
   */
  'aria-labelledby'?: string;
  /**
   * Column width definitions
   */
  gridTemplateColumns?: React.CSSProperties["gridTemplateColumns"];
  /**
   * Specify the amount of space that should be available around the contents of
   * a cell
   */
  cellPadding?: "condensed" | "normal" | "spacious";
} & React.RefAttributes<HTMLTableElement>>;
type TableHeadProps = React.ComponentPropsWithoutRef<'thead'>;
declare function TableHead({
  children
}: TableHeadProps): JSX.Element;
type TableBodyProps = React.ComponentPropsWithoutRef<'tbody'>;
declare function TableBody({
  children
}: TableBodyProps): JSX.Element;
type TableHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align'> & {
  /**
   * The horizontal alignment of the cell's content
   */
  align?: CellAlignment;
};
declare function TableHeader({
  align,
  children,
  ...rest
}: TableHeaderProps): JSX.Element;
type TableRowProps = React.ComponentPropsWithoutRef<'tr'>;
declare function TableRow({
  children,
  ...rest
}: TableRowProps): JSX.Element;
type TableCellProps = Omit<React.ComponentPropsWithoutRef<'td'>, 'align'> & {
  /**
   * The horizontal alignment of the cell's content
   */
  align?: CellAlignment;
  /**
   * Provide the scope for a table cell, useful for defining a row header using
   * `scope="row"`
   */
  scope?: 'row';
};
declare function TableCell({
  align,
  className,
  children,
  scope,
  ...rest
}: TableCellProps): JSX.Element;
type TableCellPlaceholderProps = React.PropsWithChildren;
declare function TableCellPlaceholder({
  children
}: TableCellPlaceholderProps): JSX.Element;
type TableContainerProps<As extends React.ElementType = 'div'> = PolymorphicProps<As, 'div'> & React.PropsWithChildren;
declare function TableContainer<As extends React.ElementType = 'div'>({
  children,
  className,
  as,
  ...rest
}: TableContainerProps<As>): JSX.Element;
type TableTitleProps = React.PropsWithChildren<{
  /**
   * Provide an alternate element or component to use as the container for
   * `TableSubtitle`. This is useful when specifying markup that is more
   * semantic for your use-case, such as a heading tag.
   */
  as?: keyof JSX.IntrinsicElements | React.ComponentType;
  /**
   * Provide a unique id for the table subtitle. This should be used along with
   * `aria-labelledby` on `DataTable`
   */
  id: string;
} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
declare const TableTitle: React.ForwardRefExoticComponent<Omit<TableTitleProps, "ref"> & React.RefAttributes<HTMLElement>>;
type TableSubtitleProps = React.PropsWithChildren<{
  /**
   * Provide an alternate element or component to use as the container for
   * `TableSubtitle`. This is useful when specifying markup that is more
   * semantic for your use-case
   */
  as?: keyof JSX.IntrinsicElements | React.ComponentType;
  /**
   * Provide a unique id for the table subtitle. This should be used along with
   * `aria-describedby` on `DataTable`
   */
  id: string;
} & React.HTMLAttributes<HTMLElement>>;
declare function TableSubtitle({
  as: BaseComponent,
  children,
  id
}: TableSubtitleProps): JSX.Element;
declare function TableDivider(): JSX.Element;
type TableActionsProps = React.PropsWithChildren;
declare function TableActions({
  children
}: TableActionsProps): JSX.Element;
type TableSkeletonProps<Data extends UniqueRow> = React.ComponentPropsWithoutRef<'table'> & {
  /**
   * Specify the amount of space that should be available around the contents of
   * a cell
   */
  cellPadding?: 'condensed' | 'normal' | 'spacious';
  /**
   * Provide an array of columns for the table. Columns will render as the headers
   * of the table.
   */
  columns: Array<Column<Data>>;
  /**
   * Optionally specify the number of rows which should be included in the
   * skeleton state of the component
   */
  rows?: number;
};
declare function TableSkeleton<Data extends UniqueRow>({
  cellPadding,
  columns,
  rows,
  ...rest
}: TableSkeletonProps<Data>): JSX.Element;
//#endregion
export { Table, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps };