import { type DataTableProps } from './DataTable.types';
/**
 * The `DataTable` component.
 *
 * It renders a `table` element.
 *
 * This component should be used as a wrapper for all DataTable composition components.
 * The composition components are provided as sub-components of DataTable.
 *
 * > **Migration note**: `DataGrid` has been renamed to `DataTable`.
 * > Please migrate to `DataTable`. `DataGrid` will be removed in a future major version (v5.0.0).
 *
 * You can use them as follows:
 *
 * @example
 * ```jsx
 * <DataTable>
 *   <DataTable.Header>
 *     <DataTable.HeaderRow>
 *       <DataTable.HeaderCell>Header 1</DataTable.HeaderCell>
 *     </DataTable.HeaderRow>
 *   </DataTable.Header>
 *   <DataTable.Body>
 *     <DataTable.Row>
 *       <DataTable.Cell>Cell 1</DataTable.Cell>
 *     </DataTable.Row>
 *   </DataTable.Body>
 * </DataTable>
 * ```
 */
export declare const DataTable: import("react").ForwardRefExoticComponent<Omit<DataTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>> & {
    /**
     * The `DataTableBody` component.
     * This component should be used inside the `DataTable` component.
     *
     * It renders and extends the props of `tbody` element.
     *
     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableBodyProps` to ensure proper type checking.
     * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
     *
     * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
     *
     * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
     * you must set `displayName = 'DataTableBody'` to prevent React Rules of Hooks violations.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
     *
     * @see https://react.dev/reference/rules/rules-of-hooks
     *
     * @example
     *
     * ```tsx
     * // ✅ Correct: Inherit DataTableBodyProps
     * const CustomBody = (props: DataTableBodyProps) => <DataTable.Body {...props} />;
     *
     * // ❌ Incorrect: Not inheriting DataTableBodyProps
     * const CustomBody = (props: ComponentPropsWithRef<'tbody'>) => <DataTable.Body {...props} />;
     *
     * // ✅ CORRECT: Wrapper with hooks must set displayName
     * const Body = ({ data }: BodyProps) => {
     *   const { user } = useUser(); // Using hooks
     *   return <DataTable.Body>{data.map(...)}</DataTable.Body>;
     * };
     * Body.displayName = 'DataTableBody'; // MUST match 'DataTableBody' exactly
     *
     * // ⚠️ Migration: 'DataGridBody' is still accepted but will stop working in v5.0.0.
     * // Please update to 'DataTableBody'.
     * Body.displayName = 'DataGridBody'; // TODO: Migrate to 'DataTableBody'
     *
     * // ❌ WRONG: Don't use custom names
     * Body.displayName = 'MyBody'; // Will cause hooks violation
     * Body.displayName = 'CustomDataTableBody'; // Will cause hooks violation
     * ```
     */
    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
    /**
     * The `DataTableCell` component.
     * This component should be used inside the `DataTable` component.
     *
     * It renders and extends the props of `td` element.
     *
     * When the `onClickCell` prop is provided, the cell is rendered as an interactive cell.
     * Otherwise, the cell is rendered as a default cell.
     *
     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableCellProps` to ensure proper type checking.
     * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
     *
     * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
     *
     * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
     * you must set `displayName = 'DataTableCell'` to prevent React Rules of Hooks violations.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
     *
     * @see https://react.dev/reference/rules/rules-of-hooks
     *
     * @example
     *
     * ```tsx
     * // ✅ Correct: Inherit DataTableCellProps
     * const CustomCell = (props: DataTableCellProps) => <DataTable.Cell {...props} />;
     *
     * // ❌ Incorrect: Not inheriting DataTableCellProps
     * const CustomCell = (props: ComponentPropsWithRef<'td'>) => <DataTable.Cell {...props} />;
     *
     * // ✅ CORRECT: Wrapper with hooks must set displayName
     * const Cell = ({ value }: CellProps) => {
     *   const { formatter } = useFormatter(); // Using hooks
     *   return <DataTable.Cell>{formatter(value)}</DataTable.Cell>;
     * };
     * Cell.displayName = 'DataTableCell'; // MUST match 'DataTableCell' exactly
     *
     * // ❌ WRONG: Don't use custom names
     * Cell.displayName = 'MyCell'; // Will cause hooks violation
     * Cell.displayName = 'CustomDataTableCell'; // Will cause hooks violation
     * ```
     */
    Cell: import("react").ForwardRefExoticComponent<Omit<import("./DataTableCell").DataTableCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
    /**
     * The `DataTableHeader` component.
     * This component should be used inside the `DataTable` component.
     *
     * It renders and extends the props of `thead` element.
     *
     * If the `fixedHeader` prop of the `DataTable` component is `true`, it will be sticky on the top of the table while scrolling.
     *
     * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
     *
     * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
     * you must set `displayName = 'DataTableHeader'` to prevent React Rules of Hooks violations.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
     *
     * @see https://react.dev/reference/rules/rules-of-hooks
     *
     * @example
     *
     * ```tsx
     * // ✅ CORRECT: Wrapper with hooks must set displayName
     * const Header = ({ columns }: HeaderProps) => {
     *   const { sortConfig } = useSortConfig(); // Using hooks
     *   return <DataTable.Header>{columns.map(...)}</DataTable.Header>;
     * };
     * Header.displayName = 'DataTableHeader'; // MUST match 'DataTableHeader' exactly
     *
     * // ❌ WRONG: Don't use custom names
     * Header.displayName = 'MyHeader'; // Will cause hooks violation
     * Header.displayName = 'CustomDataTableHeader'; // Will cause hooks violation
     * ```
     */
    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
    /**
     * The `DataTableHeaderCell` component.
     * This component should be used inside the `DataTable` component.
     *
     * It renders and extends the props of `th` element.
     *
     * If the `children` prop is a string, it renders a `Typography` component with `strongBody` variant.
     * Otherwise, it renders the `children` prop as is.
     *
     * When the `sortButtonProps.onClick` prop is provided, it renders a sort button.
     * It renders `SortAscending` or `SortDescending` icon based on the `sortOrder` prop.
     *
     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableHeaderCellProps` to ensure proper type checking.
     * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
     *
     * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
     *
     * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
     * you must set `displayName = 'DataTableHeaderCell'` to prevent React Rules of Hooks violations.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
     *
     * @see https://react.dev/reference/rules/rules-of-hooks
     *
     * @example
     *
     * ```tsx
     * // ✅ Correct: Inherit DataTableHeaderCellProps
     * const CustomHeaderCell = (props: DataTableHeaderCellProps) => <DataTable.HeaderCell {...props} />;
     *
     * // ❌ Incorrect: Not inheriting DataTableHeaderCellProps
     * const CustomHeaderCell = (props: ComponentPropsWithRef<'th'>) => <DataTable.HeaderCell {...props} />;
     *
     * // ✅ CORRECT: Wrapper with hooks must set displayName
     * const HeaderCell = ({ label }: HeaderCellProps) => {
     *   const { sortOrder } = useSorting(); // Using hooks
     *   return <DataTable.HeaderCell sortOrder={sortOrder}>{label}</DataTable.HeaderCell>;
     * };
     * HeaderCell.displayName = 'DataTableHeaderCell'; // MUST match 'DataTableHeaderCell' exactly
     *
     * // ❌ WRONG: Don't use custom names
     * HeaderCell.displayName = 'MyHeaderCell'; // Will cause hooks violation
     * HeaderCell.displayName = 'CustomCell'; // Will cause hooks violation
     * ```
     */
    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("./DataTableHeaderCell").DataTableHeaderCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
    /**
     * The `DataTableHeaderRow` component.
     * This component should be used inside the `DataTable` component.
     *
     * It renders and extends the props of `tr` element.
     *
     * If the `selectable` prop of the `DataTable` component is `true`, it renders a `Checkbox` component inside the first cell.
     *
     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableHeaderRowProps` to ensure proper type checking.
     * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
     *
     * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
     *
     * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
     * you must set `displayName = 'DataTableHeaderRow'` to prevent React Rules of Hooks violations.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
     *
     * @see https://react.dev/reference/rules/rules-of-hooks
     *
     * @example
     *
     * ```tsx
     * // ✅ Correct: Inherit DataTableHeaderRowProps
     * const CustomHeaderRow = (props: DataTableHeaderRowProps) => <DataTable.HeaderRow {...props} />;
     *
     * // ❌ Incorrect: Not inheriting DataTableHeaderRowProps
     * const CustomHeaderRow = (props: ComponentPropsWithRef<'tr'>) => <DataTable.HeaderRow {...props} />;
     *
     * // ✅ CORRECT: Wrapper with hooks must set displayName
     * const HeaderRow = ({ columns }: HeaderRowProps) => {
     *   const { visibleColumns } = useColumns(); // Using hooks
     *   return <DataTable.HeaderRow>{visibleColumns.map(...)}</DataTable.HeaderRow>;
     * };
     * HeaderRow.displayName = 'DataTableHeaderRow'; // MUST match 'DataTableHeaderRow' exactly
     *
     * // ❌ WRONG: Don't use custom names
     * HeaderRow.displayName = 'MyHeaderRow'; // Will cause hooks violation
     * HeaderRow.displayName = 'CustomRow'; // Will cause hooks violation
     * ```
     */
    HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("./DataTableHeaderRow").DataTableHeaderRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
    /**
     * The `DataTableRow` component.
     * This component should be used inside the `DataTable` component.
     *
     * It renders and extends the props of `tr` element.
     *
     * **Important**: When wrapping this component with a custom component, you must inherit `DataTableRowProps` to ensure proper type checking.
     * The parent component uses type checking to identify this component, and wrapping without proper props inheritance may cause issues.
     *
     * **CRITICAL: When wrapping with React hooks, you MUST set displayName:**
     *
     * If you create a wrapper component that uses React hooks (useState, useEffect, etc.),
     * you must set `displayName = 'DataTableRow'` to prevent React Rules of Hooks violations.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
     *
     * @see https://react.dev/reference/rules/rules-of-hooks
     *
     * @example
     *
     * ```tsx
     * // ✅ Correct: Inherit DataTableRowProps
     * const CustomRow = (props: DataTableRowProps) => <DataTable.Row {...props} />;
     *
     * // ❌ Incorrect: Not inheriting DataTableRowProps
     * const CustomRow = (props: ComponentPropsWithRef<'tr'>) => <DataTable.Row {...props} />;
     *
     * // ✅ CORRECT: Wrapper with hooks must set displayName
     * const Row = ({ item }: RowProps) => {
     *   const { isSelected } = useSelection(item.id); // Using hooks
     *   return <DataTable.Row selected={isSelected}>...</DataTable.Row>;
     * };
     * Row.displayName = 'DataTableRow'; // MUST match 'DataTableRow' exactly
     *
     * // ⚠️ Migration: 'DataGridRow' is still accepted but will stop working in v5.0.0.
     * // Please update to 'DataTableRow'.
     * Row.displayName = 'DataGridRow'; // TODO: Migrate to 'DataTableRow'
     *
     * // ❌ WRONG: Don't use custom names
     * Row.displayName = 'MyRow'; // Will cause hooks violation
     * Row.displayName = 'CustomDataTableRow'; // Will cause hooks violation
     * ```
     */
    Row: import("react").ForwardRefExoticComponent<Omit<import("./DataTableRow").DataTableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
};