<DataTable<User, any>
  getColumns={getColumns}
  fetchDataFn={useUsersData}
  idField="id"
  fetchByIdsFn={fetchUsersByIds}
  pageSizeOptions={[10, 20, 50, 100]}
  exportConfig={useExportConfig()}
  onRowClick={handleRowClick}
  renderToolbarContent={({ selectedRows }) => (
    <ToolbarOptions selectedRows={selectedRows} />
  )}
  config={{
    enableRowSelection: true,
    enableSearch: true,
  }}
/>

interface DataTableConfig {
  // Features
  enableRowSelection?: boolean;
  enableClickRowSelect?: boolean;
  enableKeyboardNavigation?: boolean;
  enableSearch?: boolean;
  enableDateFilter?: boolean;
  enableColumnVisibility?: boolean;
  enableUrlState?: boolean;

  // Sorting
  defaultSortBy?: string;
  defaultSortOrder?: 'asc' | 'desc';

  // Search
  searchPlaceholder?: string;

  // Column Resizing
  columnResizingTableId?: string;

  // Export
  allowExportNewColumns?: boolean;

  // UI
  size?: 'sm' | 'default' | 'lg';
}

interface SubRowsConfig {
  enabled: boolean;
  mode: 'same-columns' | 'custom-columns' | 'custom-component';
  expandIconPosition?: 'first' | 'last' | 'custom';
  getSubRowColumns?: () => ColumnDef<any>[];
  CustomSubRowComponent?: React.ComponentType<{
    subRows: any[];
    parentRow: any;
  }>;
}

subRowsConfig={{
  enabled: true,
  mode: 'same-columns',
  expandIconPosition: 'first',
}}

interface ExportConfig {
  headers: string[];
  columnMapping: Record<string, string>;
  columnWidths?: { wch: number }[];
  transformFunction?: DataTransformFunction<T>;
  entityName: string;
  flatten?: boolean;
}

{
  headers: ["id", "name", "email", "created_at"],
  columnMapping: {
    id: "User ID",
    name: "Full Name",
    email: "Email Address",
    created_at: "Registration Date",
  },
  columnWidths: [
    { wch: 10 },
    { wch: 25 },
    { wch: 30 },
    { wch: 20 },
  ],
  transformFunction: (row) => ({
    ...row,
    created_at: formatDate(row.created_at),
  }),
  entityName: "users",
}

type DataTransformFunction<T> = (row: T) => Record<string, any>;

const transformData: DataTransformFunction<User> = (row: User) => ({
  ...row,
  created_at: formatTimestampToReadable(row.created_at),
  total_spent: formatCurrency(row.total_spent),
  customer_tier: calculateTier(row.total_spent),
});

interface ToolbarOptions<T> {
  selectedRows: T[];
  allSelectedIds: number[];
  totalSelectedCount: number;
  resetSelection: () => void;
}

renderToolbarContent={({
  selectedRows,
  allSelectedIds,
  totalSelectedCount,
  resetSelection
}) => (
  <div>
    {totalSelectedCount > 0 && (
      <Button onClick={resetSelection}>
        Clear {totalSelectedCount} selected
      </Button>
    )}
  </div>
)}

{
  accessorKey: "name",
  header: ({ column }) => (
    <DataTableColumnHeader column={column} title="Name" />
  ),
  cell: ({ row }) => (
    <div className="font-medium">{row.getValue("name")}</div>
  ),
  size: 200,
  enableSorting: true,
  enableHiding: true,
}

type QueryHook = (
  page: number,
  pageSize: number,
  search: string,
  dateRange: { from_date: string; to_date: string },
  sortBy: string,
  sortOrder: string
) => UseQueryResult<QueryResponse>;

interface QueryResponse {
  data: T[];
  pagination: {
    page: number;
    limit: number;
    total_pages: number;
    total_items: number;
  };
}

export function useUsersData(
  page: number,
  pageSize: number,
  search: string,
  dateRange: { from_date: string; to_date: string },
  sortBy: string,
  sortOrder: string
) {
  return useQuery({
    queryKey: ["users", page, pageSize, search, dateRange, sortBy, sortOrder],
    queryFn: () => fetchUsers({
      page,
      limit: pageSize,
      search,
      from_date: dateRange.from_date,
      to_date: dateRange.to_date,
      sort_by: sortBy,
      sort_order: sortOrder,
    }),
    placeholderData: keepPreviousData,
  });
}

// Required property
useUsersData.isQueryHook = true;