import { default as IDataTableProps } from './IDataTableProps';
/**
 * A high-performance data table component using TanStack Table with optimizations
 * for handling large datasets. Uses native HTML table elements.
 * @param props {@link IDataTableProps} - The props for the DataTable component.
 * @returns A data table component.
 *
 * @example
 * ```tsx
 * interface DataType {
 *   name: string;
 *   age: number;
 * }
 *
 * const columns: ITableColumnProps<DataType>[] = [
 *   {
 *     title: 'Name',
 *     key: 'name',
 *     dataIndex: 'name',
 *     // Add custom sorter function
 *     sorter: (a, b) => a.name.localeCompare(b.name),
 *     // Set default sort order
 *     defaultSortOrder: 'ascend'
 *   },
 *   {
 *     title: 'Age',
 *     key: 'age',
 *     dataIndex: 'age',
 *     // Sorter function with access to sort order
 *     sorter: (a, b) => a.age - b.age
 *   },
 * ];
 *
 * const dataSource: DataType[] = [
 *   { name: 'John Doe', age: 30 },
 *   { name: 'Jane Smith', age: 25 },
 * ];
 *
 * const App = () => {
 *   return (
 *     <DataTable dataSource={dataSource} columns={columns} />
 *   );
 * }
 *
 * export default App;
 * ```
 *
 * @example
 * ```tsx
 * // Advanced example with custom rendering, row actions, filtering, and column selection
 * interface Person {
 *   id: string;
 *   name: string;
 *   age: number;
 *   status: 'active' | 'inactive' | 'pending';
 *   occupation: string;
 *   country: string;
 * }
 *
 * // Define columns with custom rendering
 * const columns: ITableColumnProps<Person>[] = [
 *   { dataIndex: 'id', title: 'ID', key: 'id', width: 120 },
 *   { dataIndex: 'name', title: 'Name', key: 'name' },
 *   { dataIndex: 'age', title: 'Age', key: 'age', align: 'end' },
 *   {
 *     dataIndex: 'status',
 *     title: 'Status',
 *     key: 'status',
 *     // Custom render function for status with Badge component
 *     render: status => (
 *       <Badge
 *         variant={status === 'active' ? 'success' : status === 'inactive' ? 'destructive' : 'warning'}
 *         label={status}
 *       />
 *     ),
 *   },
 *   { dataIndex: 'occupation', title: 'Occupation', key: 'occupation', width: 200 },
 *   { dataIndex: 'country', title: 'Country', key: 'country' }
 * ];
 *
 * const rowsSelectionMenuItems: RowsSelectionMenuItem<Person>[] = [
 *   {
 *     label: 'Edit',
 *     icon: 'Edit',
 *     onClick: (records) => {
 *       console.log(`Editing: ${records.map(r => r.name).join(', ')}`);
 *     },
 *   },
 *   {
 *     label: 'Delete',
 *     icon: 'Trash2',
 *     onClick: (records) => {
 *       console.log(`Deleting: ${records.map(r => r.id).join(', ')}`);
 *     },
 *   },
 * ];
 *
 * // Define row actions
 * const rowActionMenuItems: RowActionMenuItem<Person>[] = [
 *   {
 *     label: 'Edit',
 *     icon: 'Edit',
 *     type: DropdownItem.Default,
 *     onClick: (record) => {
 *       console.log(`Editing: ${record.name}`);
 *     },
 *   },
 *   {
 *     label: 'Delete',
 *     icon: 'Trash2',
 *     type: DropdownItem.Default,
 *     onClick: (record) => {
 *       console.log(`Deleting: ${record.id}`);
 *     },
 *   },
 * ];
 *
 * const App = () => {
 *
 *   // State management
 *   const [data, setData] = useState<Person[]>([]);
 *   const [selectedColumns, setSelectedColumns] = useState(columns);
 *   const [filter, setFilter] = useState<IFilterCondition<Person>[] | undefined>();
 *
 *   // Data fetching simulation
 *   useEffect(() => {
 *     // In a real app, replace this with your API call
 *     const mockData: Person[] = [
 *       { id: '1', name: 'John Smith', age: 32, status: 'active', occupation: 'Developer', country: 'USA' },
 *       { id: '2', name: 'Jane Doe', age: 28, status: 'inactive', occupation: 'Designer', country: 'Canada' },
 *       { id: '3', name: 'Robert Chen', age: 45, status: 'active', occupation: 'Manager', country: 'China' },
 *       { id: '4', name: 'Maria Garcia', age: 36, status: 'pending', occupation: 'Analyst', country: 'Mexico' },
 *     ];
 *     setData(mockData);
 *   }, []);
 *
 *   return (
 *     <DataTable
 *       // Data and columns
 *       dataSource={data}
 *       columns={columns}
 *
 *       // Table styling and behavior
 *       tableHeight={500}
 *       toolbar={{
 *         title: 'Employee Directory',
 *         subtitle: 'Manage employee information',
 *       }}
 *       size="sm"
 *       hasColumnSeparator={true}
 *
 *       // Column selection
 *       columnSelector={{
 *         enabled: true,
 *         value: selectedColumns,
 *         onChange: setSelectedColumns,
 *       }}
 *
 *       // Search and filtering
 *       globalSearch={{
 *         enabled: true,
 *         placeholder: 'Search employees...',
 *         onSearch: (value) => console.log(`Searching: ${value}`),
 *         debounce: 300,
 *       }}
 *
 *       // Advanced filtering
 *       filter={{
 *         enabled: true,
 *         value: filter,
 *         onChange: setFilter,
 *       }}
 *
 *       // Row selection and actions
 *       rowsSelection={{
 *        enabled: true,
 *        menuItems: rowsSelectionMenuItems,
 *       }}
 *
 *       // Row Action
 *       rowAction={{
 *         enabled: true,
 *         menuItems: rowActionMenuItems,
 *       }}
 *
 *       // Column Action
 *       columnAction={{
 *         enabled: true,
 *         onClick: (action: ColumnActionState<Person>) => console.log(action),
 *       }}
 *
 *       // Row click and header click
 *       onRowClick={(record) => console.log('Row clicked:', record)}
 *       onHeaderClick={(headerTitle, column) => console.log('Header clicked:', headerTitle, column)}
 *
 *       // Scroll detection for infinite loading
 *       onScrollEnd={() => console.log('Reached end of table, loading more data...')}
 *     />
 *   );
 * };
 *
 * export default App;
 * ```
 */
declare const DataTable: <T extends object, M extends "single" | "range" = "range">({ dataSource, columns, emptyContent, toolbar, title, description, hasColumnSeparator, autoFitColumns, size, onRowClick, onRowDoubleClick, onHeaderClick, rowsSelection, isLoading, onScrollEnd, columnResize, columnAction, columnSelector, globalSearch, rowAction, tableHeight, filter, rowKey, cellEdit, datePicker, draggable, headerStyle, conditionalFormatting, }: IDataTableProps<T, M>) => import("react/jsx-runtime").JSX.Element;
export default DataTable;