ikoncomponents 1.5.8 → 1.5.10

package/templates/default/ikoncomponents/data-table/index.tsx

@@ -1,549 +0,0 @@
-"use client";
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from "react";
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  GroupingState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  getGroupedRowModel,
-  getExpandedRowModel,
-  useReactTable,
-  getFacetedUniqueValues,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  Header,
-  Row,
-  PaginationState,
-} from "@tanstack/react-table";
-import {
-  ArrowDown,
-  ArrowDownToLine,
-  ArrowUp,
-  ArrowUpToLine,
-  ChevronDown,
-  ChevronLast,
-  ChevronRight,
-  ChevronUp,
-  X,
-} from "lucide-react";
-
-import { Button } from "../../shadcn/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../shadcn/table";
-import { DataTableToolbar } from "./datatable-toolbar";
-import { getDataTableColumnTitle } from "./function";
-import { DataTableProps, DragDropHeaderProp, DTColumnsProps } from "./type";
-import { Checkbox } from "../../shadcn/checkbox";
-import { DataTablePagination } from "./datatable-pagination";
-import { ActionMenu } from "../action-menu";
-import { cx } from "class-variance-authority";
-
-export const DataTable = (
-  <TData, TValue>(
-    { columns, data, extraParams, onTableReady }: DataTableProps<TData, TValue>,
-    ref: any
-  ) => {
-    const [sorting, setSorting] = React.useState<SortingState>([]);
-    const [globalFilter, setGlobalFilter] = React.useState("");
-    const [columnFilters, setColumnFilters] =
-      React.useState<ColumnFiltersState>([]);
-
-    const [pagination, setPagination] = React.useState<PaginationState>({
-      pageIndex: extraParams?.pageIndex || 0,
-      pageSize: extraParams?.pageSize || 15,
-    });
-    // useImperativeHandle(ref, () => ({
-    //   toggleAllRowsExpanded: (expanded: boolean) => {
-    //     table.toggleAllRowsExpanded(expanded);
-    //   },
-    //   getTableInstance: () => table, // Optional: Expose the entire table instance if needed
-    // }));
-    const [columnVisibility, setColumnVisibility] =
-      React.useState<VisibilityState>({});
-    const [grouping, setGrouping] = React.useState<GroupingState>([]);
-    const [expanded, setExpanded] = React.useState({});
-    const [rowSelection, setRowSelection] = React.useState({});
-
-    columns = columns.map((column: any) => {
-      if (!column?.filterFn) {
-        column.filterFn = "arrIncludesSome";
-      }
-      return column;
-    });
-
-    useEffect(() => {
-      if (extraParams?.checkBoxColumnCallback)
-        extraParams.checkBoxColumnCallback(
-          table.getFilteredSelectedRowModel().rows
-        );
-    }, [rowSelection]);
-
-    if (extraParams?.checkBoxColumn) {
-      columns.splice(0, 0, {
-        id: "checkBoxColumn",
-        header: ({ table }) => (
-          <Checkbox
-            checked={
-              table.getIsAllPageRowsSelected() ||
-              (table.getIsSomePageRowsSelected() && "indeterminate")
-            }
-            onCheckedChange={(value) =>
-              table.toggleAllPageRowsSelected(!!value)
-            }
-            aria-label="Select all"
-          />
-        ),
-
-        cell: ({ row }) => (
-          <>
-            <Checkbox
-              checked={row.getIsSelected()}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              aria-label="Select row"
-            />
-          </>
-        ),
-        enableSorting: false,
-        enableHiding: false,
-      });
-    }
-
-    if (extraParams?.actionMenu || extraParams?.groupActionMenu) {
-      columns.push({
-        id: "DTActions",
-        accessorKey: "Actions",
-        header: () => <div className="text-center">Action</div>,
-        size: 20,
-        headerClassName: "text-center",
-        cell: ({ row }) => {
-          if (row.getIsGrouped()) {
-            return extraParams?.groupActionMenu ? (
-              <div className="text-end">
-                <ActionMenu
-                  actionMenus={extraParams.groupActionMenu.items}
-                  extraActionParams={{
-                    arguments: [
-                      row.original,
-                      ...(extraParams.groupActionMenu.extraArguments || []),
-                    ],
-                  }}
-                />
-              </div>
-            ) : null;
-          } else if (extraParams?.actionMenu) {
-            return (
-              <div className="text-center">
-                <ActionMenu
-                  actionMenus={extraParams.actionMenu.items}
-                  extraActionParams={{
-                    arguments: [
-                      row.original,
-                      ...(extraParams.actionMenu.extraArguments || []),
-                    ],
-                  }}
-                />
-              </div>
-            );
-          } else {
-            return null;
-          }
-        },
-        enableSorting: false,
-        enableHiding: false,
-      });
-    }
-
-    // const onPaginationChange = (state: any) => {
-    //   console.warn(state);
-    //   setPagination(state);
-    //   extraParams?.onPaginationChange?.(state);
-    // }
-
-    useEffect(() => {
-      extraParams?.onPaginationChange?.(pagination);
-    }, [pagination]);
-
-    const table = useReactTable({
-      data,
-      columns,
-      state: {
-        sorting,
-        globalFilter,
-        columnFilters,
-        columnVisibility,
-        rowSelection,
-        grouping,
-        expanded,
-        pagination,
-      },
-      onPaginationChange: setPagination,
-      onSortingChange: setSorting,
-      onExpandedChange: setExpanded,
-      onColumnFiltersChange: setColumnFilters,
-      onColumnVisibilityChange: setColumnVisibility,
-      onGroupingChange: setGrouping,
-      onGlobalFilterChange: setGlobalFilter,
-      onRowSelectionChange: setRowSelection,
-      getCoreRowModel: getCoreRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFacetedUniqueValues: getFacetedUniqueValues(),
-      getFacetedMinMaxValues: getFacetedMinMaxValues(),
-      manualPagination: (extraParams?.pagination == undefined || extraParams?.pagination == true) ? undefined : true
-    });
-
-    useImperativeHandle(ref, () => table);
-
-    const [droppedHeaders, setDroppedHeaders] = useState<DragDropHeaderProp[]>(
-      []
-    );
-    // Drag Event Handlers
-    const handleDragStart = (
-      e: React.DragEvent<HTMLDivElement>,
-      header: Header<TData, unknown>
-    ) => {
-      const headerObj = {
-        id: header.id,
-        title: getDataTableColumnTitle(header.column),
-      };
-      e.dataTransfer.setData("headerObj", JSON.stringify(headerObj));
-      e.dataTransfer.effectAllowed = "move";
-    };
-
-    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      const headerObj = JSON.parse(e.dataTransfer.getData("headerObj"));
-      if (!droppedHeaders.find((e) => e.id == headerObj.id)) {
-        setDroppedHeaders((prevHeaders) => [...prevHeaders, headerObj]);
-        const column = table.getColumn(headerObj.id);
-        if (column) {
-          column.getToggleGroupingHandler()();
-        }
-      }
-    };
-
-    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault(); // Necessary to allow dropping
-    };
-
-    const handleRemoveGrouping = (groupId: string) => {
-      const newDroppedHeaders = droppedHeaders.filter(
-        (header) => header.id !== groupId
-      );
-      setDroppedHeaders(() => [...newDroppedHeaders]);
-      const column = table.getColumn(groupId);
-      if (column) {
-        column.getToggleGroupingHandler()();
-      }
-    };
-
-    const [isMount, setIsMount] = useState<boolean>(false);
-    useEffect(() => {
-      if (!isMount) {
-        setIsMount(true);
-      }
-      if (extraParams?.defaultGroups) {
-        table.setGrouping(extraParams?.defaultGroups);
-      }
-    }, []);
-
-    useEffect(() => {
-      if (onTableReady) {
-        onTableReady(table);
-      }
-    }, [onTableReady, table]);
-
-    return (
-      isMount && (
-        <div className="w-full h-full flex flex-col gap-3 justify-between">
-          <div className="flex-grow flex flex-col gap-3 overflow-hidden">
-            {(extraParams?.defaultTools == undefined ||
-              extraParams.defaultTools ||
-              extraParams.extraTools) && (
-                <DataTableToolbar table={table} extraParams={extraParams} />
-              )}
-
-            <div className="flex-grow flex flex-col overflow-hidden">
-              {(extraParams?.grouping == undefined || extraParams.grouping) && (
-                <div
-                  className="w-full border-t min-h-10 px-2 py-1 flex gap-3 items-center text-sm bg-card-new"
-                  onDrop={handleDrop}
-                  onDragOver={handleDragOver}
-                >
-                  {droppedHeaders.length === 0
-                    ? "Drag a column header here to group its column"
-                    : droppedHeaders.map((header, index) => (
-                      <div
-                        key={header.id}
-                        className="rounded-md px-2 py-1 bg-muted text-muted-foreground flex gap-3 items-center"
-                      >
-                        {header.title}
-                        <span onClick={() => handleRemoveGrouping(header.id)}>
-                          <X size={15} />
-                        </span>
-                      </div>
-                    ))}
-                </div>
-              )}
-              <div className="flex-grow overflow-hidden">
-                <Table className="border-t whitespace-nowrap bg-card-new">
-                  {(extraParams?.header == undefined || extraParams.header) && (
-                    <TableHeader className="sticky top-0 z-10 border-t bg-card-new">
-                      {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id} className={cx("")}>
-                          {headerGroup.headers.map((header) => {
-                            if (header.column.getIsGrouped()) {
-                              if (
-                                header.column.getGroupedIndex() <
-                                droppedHeaders.length - 1
-                              ) {
-                                return null;
-                              }
-                              return (
-                                <TableHead
-                                  key={header.id}
-                                  colSpan={droppedHeaders.length}
-                                  className={cx(
-                                    "w-36 ",
-                                    "text-left"
-                                  )}
-                                ></TableHead>
-                              );
-                            } else {
-                              return (
-                                <TableHead
-                                  key={header.id}
-                                  {...(extraParams?.grouping == undefined ||
-                                    extraParams.grouping
-                                    ? {
-                                      onDragStart: (e) =>
-                                        handleDragStart(e, header),
-                                      draggable: true,
-                                    }
-                                    : {})}
-                                  className={cx(
-                                    "text-left"
-                                  )}
-                                >
-                                  {header.isPlaceholder ? null : (extraParams?.sorting ==
-                                    undefined ||
-                                    extraParams.sorting) &&
-                                    header.column.getCanSort() ? (
-                                    <div
-                                      onClick={header.column.getToggleSortingHandler()}
-                                      className={cx(
-                                        "-mx-2 inline-flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1 hover:bg-muted"
-                                      )}
-                                    >
-                                      <div>
-                                        {flexRender(
-                                          header.column.columnDef.header,
-                                          header.getContext()
-                                        )}
-                                      </div>
-                                      {header.column.getCanSort() ? (
-                                        <div className="-space-y-2">
-                                          <ChevronUp
-                                            className={cx(
-                                              "size-3.5 text-foreground",
-                                              header.column.getIsSorted() ===
-                                                "desc"
-                                                ? "opacity-30"
-                                                : ""
-                                            )}
-                                            aria-hidden="true"
-                                          />
-                                          <ChevronDown
-                                            className={cx(
-                                              "size-3.5 text-foreground",
-                                              header.column.getIsSorted() ===
-                                                "asc"
-                                                ? "opacity-30"
-                                                : ""
-                                            )}
-                                            aria-hidden="true"
-                                          />
-                                        </div>
-                                      ) : null}
-                                    </div>
-                                  ) : (
-                                    flexRender(
-                                      header.column.columnDef.header,
-                                      header.getContext()
-                                    )
-                                  )}
-                                </TableHead>
-                              );
-                            }
-                          })}
-                        </TableRow>
-                      ))}
-                    </TableHeader>
-                  )}
-                  <TableBody>
-                    {table.getRowModel().rows.length ? (
-                      table.getRowModel().rows.map((row) =>
-                        row.getIsGrouped() ? (
-                          <TableRow key={row.id}>
-                            {row.getVisibleCells().map((cell) => {
-                              if (cell.column.getIndex() < row.depth) {
-                                return null;
-                              }
-                              return (
-                                // colSpan={cell.column.getIndex() == row.depth ? row.depth + 1 : undefined}
-                                <TableCell
-                                  key={cell.id}
-                                  colSpan={
-                                    cell.column.getIndex() == row.depth
-                                      ? row.depth + 1
-                                      : undefined
-                                  }
-                                  className={
-                                    cell.column.getIndex() == row.depth
-                                      ? "w-36"
-                                      : ""
-                                  }
-                                >
-                                  {cell.getIsGrouped() ? (
-                                    <Button
-                                      variant="link"
-                                      onClick={row.getToggleExpandedHandler()}
-                                      className={`text-right text-foreground`}
-                                      style={{
-                                        marginLeft: row.depth + "rem",
-                                      }}
-                                    >
-                                      {row.getIsExpanded() ? (
-                                        <ChevronDown />
-                                      ) : (
-                                        <ChevronRight />
-                                      )}{" "}
-                                      {flexRender(
-                                        cell.column.columnDef.cell,
-                                        cell.getContext()
-                                      )}{" "}
-                                      ({row.subRows.length})
-                                    </Button>
-                                  ) : cell.column.id == "DTActions" ? (
-                                    flexRender(
-                                      cell.column.columnDef.cell,
-                                      cell.getContext()
-                                    )
-                                  ) : cell.getIsAggregated() ? (
-                                    flexRender(
-                                      cell.column.columnDef.aggregatedCell ??
-                                      cell.column.columnDef.cell,
-                                      cell.getContext()
-                                    )
-                                  ) : cell.getIsPlaceholder() ? null : (
-                                    flexRender(
-                                      cell.column.columnDef.cell,
-                                      cell.getContext()
-                                    )
-                                  )}
-                                </TableCell>
-                              );
-                            })}
-                          </TableRow>
-                        ) : (
-                          <TableRow
-                            key={row.id}
-                            className={cx(
-                              row.getIsSelected() ? "bg-accent/10" : ""
-                            )}
-                            {...(extraParams?.checkBoxColumn && {
-                              onClick: () =>
-                                row.toggleSelected(!row.getIsSelected()),
-                            })}
-                          >
-                            {row.getVisibleCells().map((cell, index) => (
-                              <TableCell
-                                key={cell.id}
-                                className={cx(
-                                  row.getIsSelected() ? "relative" : "",
-                                  !(
-                                    extraParams?.actionMenu ||
-                                    extraParams?.groupActionMenu
-                                  ) && "py-2"
-                                )}
-                              >
-                                {index === 0 && row.getIsSelected() && (
-                                  <div className="absolute inset-y-0 left-0 w-0.5 bg-primary" />
-                                )}
-                                {cell.getIsPlaceholder()
-                                  ? null
-                                  : flexRender(
-                                    cell.column.columnDef.cell,
-                                    cell.getContext()
-                                  )}
-                              </TableCell>
-                            ))}
-                          </TableRow>
-                        )
-                      )
-                    ) : (
-                      <TableRow>
-                        <TableCell
-                          colSpan={columns.length}
-                          className="h-24 text-center"
-                        >
-                          No results.
-                        </TableCell>
-                      </TableRow>
-                    )}
-                  </TableBody>
-                  {extraParams?.footer && (
-                    <TableFooter className="sticky bottom-0 bg-background text-foreground">
-                      {table.getFooterGroups().map((group) => (
-                        <TableRow>
-                          {group.headers.map((header) => (
-                            <TableCell>
-                              {header.isPlaceholder ? null : (
-                                <div className="flex items-center">
-                                  {flexRender(
-                                    header.column.columnDef.footer,
-                                    header.getContext()
-                                  )}
-                                </div>
-                              )}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))}
-                    </TableFooter>
-                  )}
-                </Table>
-              </div>
-            </div>
-          </div>
-          {(extraParams?.paginationBar == undefined ||
-            extraParams.paginationBar) && (
-              <DataTablePagination table={table} extraParams={extraParams} />
-            )}
-        </div>
-      )
-    );
-  }
-);

package/templates/default/ikoncomponents/data-table/type.ts

@@ -1,75 +0,0 @@
-import {
-  Column,
-  ColumnDef,
-  PaginationState,
-  Table,
-} from "@tanstack/react-table";
-import { ActionMenuProps } from "../action-menu/type";
-
-export interface DataTableProps<TData, TValue> {
-  data: TData[];
-  columns: DTColumnsProps<TData, TValue>[];
-  extraParams?: DTExtraParamsProps;
-  onTableReady?: (table: any) => void;
-}
-
-export type DTColumnsProps<TData, TValue = unknown> = ColumnDef<
-  TData,
-  TValue
-> & {
-  title?: string;
-  headerClassName?: string;
-};
-
-export interface DTExtraParamsProps {
-  defaultGroups?: string[];
-  grouping?: boolean;
-  header?: boolean;
-  footer?: boolean;
-  defaultTools?: ("columnFilter" | "search" | "filter")[] | boolean;
-  extraTools?: any;
-  sorting?: boolean;
-  paginationBar?: boolean;
-  rowsPerPage?: boolean;
-  pagination?: boolean;
-  numberOfRows?: boolean;
-  checkBoxColumn?: boolean;
-  checkBoxColumnCallback?: (selectedRows: any[]) => void;
-  actionMenu?: DTActionMenuProps;
-  groupActionMenu?: DTActionMenuProps;
-  pageSize?: number;
-  pageIndex?: number;
-  pageSizeArray?: number[];
-  rowSelection?: boolean;
-  onPaginationChange?: (state: PaginationState) => void;
-  defaultRowSelection?: (row: any) => boolean;
-}
-
-export interface DTActionMenuProps {
-  items: ActionMenuProps[];
-  extraArguments?: any[];
-}
-
-export interface DataTableViewOptionsProps<TData> {
-  table: Table<TData>;
-}
-export interface DTToolBarProps<TData> {
-  table: Table<TData>;
-  extraParams?: DTExtraParamsProps;
-}
-export interface DataTableFilterProps<TData> {
-  table: Table<TData>;
-}
-
-export interface DataTableFacetedFilterProps<TData, TValue> {
-  column: Column<TData, TValue>;
-}
-export interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-  extraParams?: DTExtraParamsProps;
-}
-
-export interface DragDropHeaderProp {
-  id: string;
-  title: string;
-}