import React from 'react';
import { CheckboxProps, InputProps, DropdownProps } from '@bigbinary/neetoui';

type Column = {
  title: string;
  dataIndex: string;
  key: string;
  [key: string]: any;
};
/**
 *
 * It is a helper component that can be used along with the table component to
 *
 * hide, show, and reorder columns. The component now uses server-side
 *
 * configuration storage through the useTableConfigurations hook.
 *
 * ![image](https://user-images.githubusercontent.com/32426070/195069324-3cbb4c70-f62b-4080-b4ae-bdeabb449b23.png|height=200|width=300)
 *
 * This hook is for managing table column configurations. It provides column
 *
 * customization including visibility, ordering, and server-side persistence.
 *
 * @example 
 *
 * import { useState } from "react";
 * 
 * import { Table } from "@bigbinary/neetoui";
 * import Columns, {
 *   useTableConfigurations,
 * } from "@bigbinary/neeto-molecules/Columns";
 * 
 * import { DEFAULT_ROW_DATA } from "./constants";
 * 
 * const App = () => {
 *   const tableKey = "users-table";
 *   const DEFAULT_COLUMNS_DATA = [
 *     { title: "Id", dataIndex: "id", key: "id", isHidable: false },
 *     { title: "Name", dataIndex: "name", key: "name", isHidable: false },
 *     { title: "Email", dataIndex: "email", key: "email" },
 *     { title: "Status", dataIndex: "status", key: "status" },
 *   ];
 * 
 *   const {
 *     customizedColumns,
 *     allProcessedColumns,
 *     isTableConfigurationLoading,
 *     hideColumn,
 *     showColumn,
 *   } = useTableConfigurations(tableKey, DEFAULT_COLUMNS_DATA);
 * 
 *   if (isTableConfigurationLoading) {
 *     return <div>Loading...</div>;
 *   }
 * 
 *   return (
 *     <div>
 *       <Columns
 *         columnData={allProcessedColumns}
 *         tableKey={tableKey}
 *         isSearchable
 *       />
 *       <Table rowData={DEFAULT_ROW_DATA} columnData={customizedColumns} />
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const Columns: React.FC<{
  checkboxProps?: CheckboxProps;
  tableKey: string;
  columnData: Column[];
  isSearchable?: boolean;
  noColumnMessage?: string;
  searchProps?: InputProps;
} & DropdownProps>;

export { Columns as default };