interface DndTableProps<RowData = any> {
  /**
   * The data for the rows of the table.
   */
  rowData: RowData[];
  /**
   * The data for the columns of the table.
   */
  columnData: any[];
  /**
   * The index of the column to display the overlay for.
   */
  overlayColumnIndex?: number;
  /**
   * A function that determines if a row is droppable based on checks on the data.
   */
  isRowDroppable?: (data: RowData) => boolean;
  /**
   * A function that is called when a row is dropped.
   */
  onDrop: (active: RowData, over: RowData) => void;
  [key: string]: any;
}
interface UseDndTableProps<RowData = any> {
  rowData: RowData[];
  onUpdate: (active: RowData, over: RowData) => void;
}
declare const useDndTable: (props: UseDndTableProps<RowData>) => {
  rowData: RowData[];
  onDrop: (active: RowData, over: RowData) => void;
};
/**
 *
 * The DndTable component is a drag-and-drop enabled table that allows users to
 *
 * reorder rows by dragging and dropping them. It provides visual feedback during
 *
 * drag operations and supports custom overlay rendering.
 *
 * The main table component with drag-and-drop functionality built on top of the
 *
 * neetoui Table component.
 *
 * A custom hook that provides state management and error handling for
 *
 * drag-and-drop operations. It automatically handles optimistic updates and
 *
 * rollback on errors.
 *
 * @example 
 *
 * import DndTable, { useDndTable } from "@bigbinary/neeto-molecules/DndTable";
 * 
 * const MyComponent = () => {
 *   const [data, setData] = useState([
 *     { id: 1, name: "John Doe", email: "john.doe@example.com" },
 *     { id: 2, name: "Jane Doe", email: "jane.doe@example.com" },
 *     { id: 3, name: "Alice Smith", email: "alice.smith@example.com" },
 *     { id: 4, name: "Bob Johnson", email: "bob.johnson@example.com" },
 *     { id: 5, name: "Carol Williams", email: "carol.williams@example.com" },
 *     { id: 6, name: "David Brown", email: "david.brown@example.com" },
 *     { id: 7, name: "Emma Davis", email: "emma.davis@example.com" },
 *     { id: 8, name: "Frank Miller", email: "frank.miller@example.com" },
 *     { id: 9, name: "Grace Wilson", email: "grace.wilson@example.com" },
 *     { id: 10, name: "Henry Moore", email: "henry.moore@example.com" },
 *     { id: 11, name: "Ivy Taylor", email: "ivy.taylor@example.com" },
 *     { id: 12, name: "Jack Anderson", email: "jack.anderson@example.com" },
 *     { id: 13, name: "Kate Thomas", email: "kate.thomas@example.com" },
 *     { id: 14, name: "Liam Jackson", email: "liam.jackson@example.com" },
 *     { id: 15, name: "Maya White", email: "maya.white@example.com" },
 *     { id: 16, name: "Noah Harris", email: "noah.harris@example.com" },
 *     { id: 17, name: "Olivia Martin", email: "olivia.martin@example.com" },
 *     { id: 18, name: "Paul Thompson", email: "paul.thompson@example.com" },
 *     { id: 19, name: "Quinn Garcia", email: "quinn.garcia@example.com" },
 *     { id: 20, name: "Rachel Martinez", email: "rachel.martinez@example.com" },
 *     { id: 21, name: "Sam Robinson", email: "sam.robinson@example.com" },
 *     { id: 22, name: "Tina Clark", email: "tina.clark@example.com" },
 *     { id: 23, name: "Uma Rodriguez", email: "uma.rodriguez@example.com" },
 *     { id: 24, name: "Victor Lewis", email: "victor.lewis@example.com" },
 *     { id: 25, name: "Wendy Lee", email: "wendy.lee@example.com" },
 *     { id: 26, name: "Xavier Walker", email: "xavier.walker@example.com" },
 *     { id: 27, name: "Yara Hall", email: "yara.hall@example.com" },
 *     { id: 28, name: "Zoe Allen", email: "zoe.allen@example.com" },
 *     { id: 29, name: "Aaron Young", email: "aaron.young@example.com" },
 *     { id: 30, name: "Bella King", email: "bella.king@example.com" },
 *   ]);
 * 
 *   const { rowData, onDrop } = useDndTable({
 *     rowData: data,
 *     onUpdate: async (active, over) => {
 *       // Make API call to update order, the item is automatically removed from the local state by the hook.
 *       await updateRowOrder(active.id, over.id);
 *     },
 *   });
 * 
 *   const columnData = [
 *     { key: "name", dataIndex: "name", title: "Name" },
 *     { key: "email", dataIndex: "email", title: "Email" },
 *   ];
 * 
 *   return (
 *     <DndTable
 *       rowData={rowData}
 *       columnData={columnData}
 *       onDrop={onDrop}
 *       isRowDroppable={row => row.status !== "archived"}
 *     />
 *   );
 * };
 * @endexample
 * You can customize the drag overlay by providing a render function in your
 *
 * column configuration:
 *
 * @example 
 *
 * const columnData = [
 *   {
 *     key: "name",
 *     dataIndex: "name",
 *     title: "Name",
 *     render: (value, record) => (
 *       <div className="flex items-center">
 *         <Avatar name={record.name} />
 *         <span className="ml-2">{value}</span>
 *       </div>
 *     ),
 *   },
 *   { key: "email", dataIndex: "email", title: "Email" },
 * ];
 * 
 * <DndTable
 *   rowData={rowData}
 *   columnData={columnData}
 *   overlayColumnIndex={0} // Use the first column for overlay
 *   onDrop={onDrop}
 * />;
 * @endexample
 * You can make certain rows non-droppable based on their data:
 *
 * @example 
 *
 * <DndTable
 *   rowData={rowData}
 *   columnData={columnData}
 *   onDrop={onDrop}
 *   isRowDroppable={row => {
 *     // Only allow dropping if row is not locked
 *     return !row.isLocked;
 *   }}
 * />
 * @endexample
 * The useDndTable hook automatically handles errors and shows toast
 *
 * notifications:
 *
 * @example 
 *
 * const { rowData, onDrop } = useDndTable({
 *   rowData: data,
 *   onUpdate: (active, over) => api.updateOrder(active.id, over.id);
 *   // Note: Changes to local state are automatically rolled back by the hook on error.
 * });
 * @endexample
*/
declare const DndTable: <RowData = any>(props: DndTableProps<RowData>) => JSX.Element | null;

export { DndTable as default, useDndTable };