@prismicio/react/dist/PrismicTable.d.ts

React components and hooks to fetch and present Prismic content

import { ComponentType, FC, ReactNode } from "react";
import { TableField, TableFieldHead, TableFieldHeadRow, TableFieldBody, TableFieldBodyRow, TableFieldHeaderCell, TableFieldDataCell } from "@prismicio/client";
import { JSXMapSerializer } from "./PrismicRichText.js";
type TableComponents = {
    table?: ComponentType<{
        table: TableField<"filled">;
        children: ReactNode;
    }>;
    thead?: ComponentType<{
        head: TableFieldHead;
        children: ReactNode;
    }>;
    tbody?: ComponentType<{
        body: TableFieldBody;
        children: ReactNode;
    }>;
    tr?: ComponentType<{
        row: TableFieldHeadRow | TableFieldBodyRow;
        children: ReactNode;
    }>;
    th?: ComponentType<{
        cell: TableFieldHeaderCell;
        children: ReactNode;
    }>;
    td?: ComponentType<{
        cell: TableFieldDataCell;
        children: ReactNode;
    }>;
};
/** Props for `<PrismicTable>`. */
export type PrismicTableProps = {
    /** The Prismic table field to render. */
    field: TableField;
    /**
     * An object that maps a table block to a React component.
     *
     * @example A map serializer.
     *
     * ```jsx
     * {
     *   table: ({children}) => <table>{children}</table>
     *   thead: ({children}) => <thead>{children}</thead>
     * }
     * ```
     */
    components?: JSXMapSerializer & TableComponents;
    /**
     * The value to be rendered when the field is empty. If a fallback is not
     * given, `null` will be rendered.
     */
    fallback?: ReactNode;
};
/**
 * React component that renders content from a Prismic table field. By default,
 * HTML elements are rendered for each piece of content. A `tbody` block will
 * render a `<tbody>` HTML element, for example.
 *
 * To customize the components that are rendered, provide a map serializer to
 * the `components` prop.
 *
 * @example Rendering a table field using the default HTMl elements.
 *
 * ```jsx
 * <PrismicTable field={document.data.my_table} />;
 * ```
 *
 * @example Rendering a table field using a custom set of React components.
 *
 * ```jsx
 * <PrismicTable
 * 	field={document.data.my_table}
 * 	components={{
 * 		tbody: ({ children }) => (
 * 			<tbody className="my-class">{children}</tbody>
 * 		),
 * 	}}
 * />;
 * ```
 *
 * @param props - Props for the component.
 *
 * @returns The table field's content as React components.
 *
 * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}
 */
export declare const PrismicTable: FC<PrismicTableProps>;
export {};