Table

import { Table, createColumnHelper } from "@lualtek/react-components";
import { useMemo } from "react";
 
type Person = {
  firstName: string;
  age: number;
};
 
const columnHelper = createColumnHelper<Person>();
 
export default () => {
  const COLUMNS = useMemo(
    () => [
      columnHelper.accessor("firstName", {
        id: "firstName",
        header: "First Name",
        cell: (info) => info.getValue(),
      }),
      columnHelper.accessor((row) => row.lastName, {
        id: "age",
        header: () => "Age",
        cell: (info) => info.renderValue(),
      }),
    ],
    []
  );
 
  const DATA = useMemo(
    () => [
      {
        age: 39,
        firstName: "Ayers",
      },
      {
        age: 40,
        firstName: "Maritza",
      },
      // ...
    ],
    []
  );
  return <UI.Table columns={COLUMNS} data={DATA} />;
};

type ColumnMeta = {
  collapsed?: boolean;
  align?: "start" | "center" | "end";
};

type CommonProps<T> = {
  /**
   * Pass the data structure to the table. Each object key can be used as `accessor` for a column.
   */
  data: T[];
 
  /**
   * Define the columns and headers of the table.
   */
  columns: Array<ColumnDef<T, any>>;
 
  /**
   * Add an alternate style to the table rows
   */
  stripes?: boolean;
 
  /**
   * Enable horizontal separators between the table rows
   * @default true
   */
  separators?: boolean;
 
  /**
   * Set the loading state of the table. This will sho skeleton loaders instead of the actual data.
   */
  loading?: boolean;
 
  /**
   * Custom component/empty state to show when the table has no data or
   * all columns have been toggled off.
   */
  emptyComponent?: ReactNode;
 
  /**
   * Show pagination below the table. This is recommended only for tables with a lot of rows.
   */
  showPagination?: boolean;
 
  /**
   * Set clusters of items to show in a single page. These values are used to
   * compute the select options for the page size select.
   */
  pageClusters?: TablePaginationProps["clusters"];
 
  /**
   * Set the label for the clusters select.
   * @note Use this propertu to translate the label of the select used to change visible items per page.
   */
  clustersLabel?: string;
 
  /**
   * Pass custom actions to the table header
   */
  actions?: ReactNode;
 
  /**
   * Add an accessible title to the table component
   */
  title?: TableHeaderProps["title"];
 
  /**
   * Hide the header which includes the title and controls.
   * This option is ignored and set to `true` if `selectableRows` is set to `true`.
   * @default false
   */
  showHeader?: boolean;
 
  /**
   * Enable the dropdown to choose the visibility of the column
   * @default false
   */
  enableToggleColumns?: boolean;
 
  /**
   * Set the label for the toggle columns control
   */
  toggleColumnsLabel?: string;
 
  /**
   * Enable row selection. This property will render an additiona column
   * at the start of the table, containing a checkbox.
   */
  selectableRows?: boolean;
 
  /**
   * Set the label for selected items in the table. Default to "Selected items"
   * @default `Selected items: ${selectedRows}`
   */
  renderSelectedLabel?: (count: number) => ReactNode;
 
  /**
   * Pass custom components to show when rows are selected.
   */
  renderSelectedActions?: (selectedRows: Array<Row<T>>) => ReactNode;
 
  /**
   * Set the table height after which the table will scroll.
   */
  height?: string;
 
  /**
   * Set the table background color. This must be set if `height` is set because
   * the color is used as background for sticky headers.
   */
  background?: string;
 
  /**
   * Set the initial page size picking a value from `pageClusters` array.
   * @default 50
   */
  itemsPerPage?: number;
 
  /**
   * Get Table instance
   */
  getTableInstance?: (instance: TableType<T>) => void;
};
 
type ConditionalProps<T> =
  | {
      /**
       * Enable the global filter function
       */
      enableFilterControl: boolean;
 
      /**
       * Custom function used to filters table data.
       */
      filterFn: FilterFnOption<T>;
 
      /**
       * Set the label for the filter textfield control
       * @default 'Search across data',
       */
      filterControlLabel: string;
 
      /**
       * Set debounce time for filter search
       * @default 230
       */
      filterDebounce?: number;
    }
  | {
      /**
       * Enable the global filter function
       */
      enableFilterControl?: never;
 
      /**
       * Custom function used to filters table data.
       */
      filterFn?: never;
 
      /**
       * Set the label for the filter textfield control
       */
      filterControlLabel?: never;
 
      /**
       * Set debounce time for filter search
       * @default 230
       */
      filterDebounce?: never;
    };
 
export type TableProps<T> = CommonProps<T> & ConditionalProps<T>;