import type React from "react";
import type { DataTableProps } from "../components/data-table.js";
import type { Icon } from "../icon.js";
/**
 * One thing a cell can show: a string or a number as text, or one of the SDK's own components.
 */
type DataTableCellItem = React.JSX.Element | string | number;
/**
 * What a column's `cell` returns for a row:
 *
 * - a string or a number, shown as text. Convert a boolean or a `Date` first, like
 *   `value ? "Yes" : "No"` or `Intl.DateTimeFormat`.
 * - `<Badge>`, `<StatusBadge>`, `<Avatar>`, `<Link>`, `<AttioLink>`, `<Button>` or `<LoadingState>`
 *   from the SDK
 * - `null` or `undefined`, for an empty cell
 * - an array or a Fragment of the above, for several items in one cell. `condition && <Badge />`
 *   works inside it.
 *
 * Keep one kind of item per cell. Text, `<Link>` and `<AttioLink>` can mix. Use one SDK component
 * per item, with text as its children: your own components and nested components can't be shown.
 *
 * Return the raw value from `accessor` and format it with `Intl` in `cell`, so the column sorts and
 * aligns by the real value.
 */
export type DataTableCellNode = DataTableCellItem | null | undefined | ReadonlyArray<DataTableCellItem | null | undefined | false>;
/**
 * A value the table can show as text without a `cell`.
 */
type DataTableTextValue = string | number | boolean | Date | null | undefined;
type DataTableCellFn<TRow, TValue> = (context: {
    row: TRow;
    value: TValue;
}) => DataTableCellNode;
interface DataTableColumnBase {
    /**
     * A short, stable id, unique in the table, like `"arr"`. `sorting` reports the column by this id,
     * so keep it the same when you rename the header.
     */
    id: string;
    /**
     * The text shown in the column header.
     */
    header: string;
    /**
     * An Attio icon in the column header.
     */
    icon?: Icon;
    /**
     * The starting width in pixels. Defaults to 200. The viewer can resize the column.
     */
    size?: number;
    /**
     * Lets the viewer sort by clicking the header. Defaults to true. Rows sort by the `accessor`
     * value, not by what `cell` shows. Set it to false for a column with nothing to sort by, like a
     * column of buttons.
     */
    enableSorting?: boolean;
}
/**
 * A column of the table. `accessor` reads the column's value from the row: return the raw value, so
 * the column sorts and aligns by it. `cell` decides what that value looks like.
 *
 * `cell` is optional when `accessor` returns a string, a number, a boolean, a `Date`, `null` or
 * `undefined`, and required otherwise.
 *
 * `cell` gets `row` and `value`. `value` is `unknown`, so to call a method or format a number, read
 * the field from `row` instead, since `row` keeps its types.
 */
export type DataTableColumn<TRow> = (DataTableColumnBase & {
    accessor: (row: TRow) => DataTableTextValue;
    cell?: DataTableCellFn<TRow, unknown>;
}) | (DataTableColumnBase & {
    accessor: (row: TRow) => unknown;
    cell: DataTableCellFn<TRow, unknown>;
});
/**
 * What the hook needs to turn rows into cells. Everything about how the table *looks* is a prop on
 * `<DataTable />` instead.
 */
export interface DataTableConfig<TRow> {
    /**
     * The data shown in the table. Each element is one row, in the order the table starts in.
     * Filter in your app and hand over a new array: the sort and the selection stay.
     */
    data: Array<TRow>;
    /**
     * The columns, in display order. Leave it out for a quick look at the data: every key on the rows
     * becomes a column. Write `columns` to choose headers, format values or show components.
     */
    columns?: Array<DataTableColumn<TRow>>;
    /**
     * Returns a stable, unique id for a row, like a record id. Selection follows these ids. Defaults to
     * the row's position in `data`, which points at the wrong rows once rows are added, removed or
     * reordered.
     */
    getRowId?: (row: TRow) => string;
}
/**
 * The `id` of the column the viewer sorted by, and the direction. Both are `null` when the rows are in
 * your order.
 */
export interface DataTableSort {
    id: string | null;
    direction: "asc" | "desc" | null;
}
export interface DataTableApi {
    /**
     * The table, already bound to your rows and columns. Render it where the table should appear.
     */
    DataTable: (props: DataTableProps) => React.JSX.Element;
    /**
     * The ids of the selected rows, in the order the table shows them. Always empty unless
     * `<DataTable />` is `selectable`.
     */
    selectedRowIds: Array<string>;
    /**
     * Unselects every row.
     */
    clearSelection: () => void;
    /**
     * The column the viewer sorted by. Read only: the table sorts the rows for you.
     */
    sorting: DataTableSort;
}
/**
 * Shows many rows in a fast, scrollable table that the viewer can sort, select and resize. For a
 * small table that never changes, use `<Table />` instead.
 *
 * Experimental: the API can change in a minor release of the SDK. Web only: the mobile app and the
 * browser extension don't show data tables yet.
 *
 * @example
 *
 * import { Badge, Button, Link, experimental_useDataTable } from "attio/client"
 *
 * export function PeopleTable({ people }: { people: Array<Person> }) {
 *     const { DataTable } = experimental_useDataTable({
 *         data: people,
 *         columns: [
 *             {
 *                 id: "name",
 *                 header: "Name",
 *                 icon: "User",
 *                 accessor: (person) => `${person.firstName} ${person.lastName}`,
 *             },
 *             {
 *                 id: "email",
 *                 header: "Email",
 *                 size: 320,
 *                 accessor: (person) => person.email,
 *                 cell: ({ row }) => <Link href={`mailto:${row.email}`}>{row.email}</Link>,
 *             },
 *             {
 *                 id: "status",
 *                 header: "Status",
 *                 accessor: (person) => person.status,
 *                 cell: ({ row }) => <Badge color="green">{row.status}</Badge>,
 *             },
 *             {
 *                 id: "tags",
 *                 header: "Tags",
 *                 accessor: (person) => person.tags,
 *                 cell: ({ row }) => row.tags.map((tag) => <Badge color="blue">{tag}</Badge>),
 *             },
 *             {
 *                 id: "actions",
 *                 header: "",
 *                 accessor: (person) => person.email,
 *                 cell: ({ row }) => <Button label="Email" onClick={() => sendEmail(row)} />,
 *             },
 *         ],
 *         getRowId: (person) => person.id,
 *     })
 *
 *     return <DataTable height="medium" selectable />
 * }
 */
export declare function useDataTable<TRow>(config: DataTableConfig<TRow>): DataTableApi;
export {};
//# sourceMappingURL=use-data-table.d.ts.map