@ayasofyazilim/ui 0.0.0

package/src/custom/tanstack-table/fields/tanstack-table-view-options.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Table } from "@tanstack/react-table";
+
+import { ChevronDownIcon } from "lucide-react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@repo/ayasofyazilim-ui/components/dropdown-menu";
+import {
+  TanstackTableSelectedRowActionType,
+  TanstackTableTableActionsType,
+} from "../types";
+
+interface TanstackTableViewOptionsProps<TData> {
+  editable?: boolean;
+  selectedRowAction?: TanstackTableSelectedRowActionType<TData>;
+  setTableAction: (actions: TanstackTableTableActionsType<TData>) => void;
+  table: Table<TData>;
+  tableActions?: TanstackTableTableActionsType<TData>[];
+  tableData: TData[];
+}
+
+function TablePrimaryActionButton<TData>({
+  table,
+  action,
+  setRowAction,
+}: {
+  action: TanstackTableTableActionsType<TData>;
+  setRowAction: (actions: TanstackTableTableActionsType<TData>) => void;
+  table: Table<TData>;
+}) {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      type="button"
+      onClick={() => handleActionOnClick(table, action, setRowAction)}
+    >
+      {action?.icon && <action.icon className="mr-2 h-4 w-4" />}
+      {action.cta?.toString()}
+    </Button>
+  );
+}
+function handleActionOnClick<TData>(
+  table: Table<TData>,
+  action: TanstackTableTableActionsType<TData>,
+  setRowAction: (actions: TanstackTableTableActionsType<TData>) => void
+) {
+  if (action.type === "simple") {
+    action.onClick();
+    return;
+  }
+  if (action.type === "create-row") {
+    table.options.meta?.addRow(-1, "", null);
+    action?.onClick?.();
+    return;
+  }
+  setRowAction(action);
+}
+
+export function TanstackTableViewOptions<TData>(
+  props: TanstackTableViewOptionsProps<TData>
+) {
+  const {
+    table,
+    tableActions,
+    selectedRowAction,
+    setTableAction: setRowAction,
+    tableData,
+    editable,
+  } = props;
+
+  // Filter actions based on condition, keeping backward compatibility
+  const filteredActions =
+    tableActions?.filter(
+      (action) => !action.condition || action.condition(tableData)
+    ) ?? [];
+
+  const primaryAction = filteredActions[0];
+  const secondaryAction = filteredActions[1];
+  const otherActions = filteredActions.slice(2);
+  const selectedRowCount = Object.keys(table.getState().rowSelection).length;
+
+  return (
+    <>
+      {selectedRowAction && selectedRowCount > 0 && (
+        <div
+          className={
+            primaryAction &&
+            ((primaryAction.condition &&
+              primaryAction.condition?.(tableData)) ||
+              true) &&
+            otherActions &&
+            "mr-2"
+          }
+        >
+          <Button
+            variant="outline"
+            size="sm"
+            type="button"
+            className="ml-2"
+            onClick={() => {
+              const selectedRowIds = table.getState().rowSelection;
+              selectedRowAction.onClick(Object.keys(selectedRowIds), tableData);
+            }}
+          >
+            {selectedRowAction?.icon && (
+              <selectedRowAction.icon className="mr-2 h-4 w-4" />
+            )}
+            {`${selectedRowAction.cta?.toString()} (${selectedRowCount})`}
+          </Button>
+        </div>
+      )}
+
+      {editable && null}
+
+      <div className="space-x-2">
+        {primaryAction && (
+          <TablePrimaryActionButton
+            table={table}
+            action={primaryAction}
+            setRowAction={setRowAction}
+          />
+        )}
+        {secondaryAction && (
+          <TablePrimaryActionButton
+            table={table}
+            action={secondaryAction}
+            setRowAction={setRowAction}
+          />
+        )}
+        {otherActions && otherActions.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="sm"
+                type="button"
+                variant="outline"
+                className="px-2"
+              >
+                <ChevronDownIcon className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              {otherActions?.map((action) => (
+                <DropdownMenuItem key={action.cta}>
+                  <Button
+                    variant="ghost"
+                    type="button"
+                    size="sm"
+                    className="justify-start w-full"
+                    onClick={() =>
+                      handleActionOnClick(table, action, setRowAction)
+                    }
+                  >
+                    {action.icon && <action.icon className="w-4 h-4" />}
+                    <span className="ml-2">{action.cta}</span>
+                  </Button>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </>
+  );
+}

package/src/custom/tanstack-table/index.tsx

@@ -0,0 +1,244 @@
+"use client";
+"use no memo";
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowData,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { useCallback, useMemo, useState } from "react";
+
+import {
+  TanstackTableActionDialogs,
+  TanstackTablePagination,
+  TanstackTablePlainTable,
+  TanstackTableToolbar,
+} from "./fields";
+
+import {
+  TanstackBaseProps,
+  TanstackTablePropsType,
+  TanstackTableRowActionsType,
+  TanstackTableTableActionsType,
+} from "./types";
+import {
+  CellWithActions,
+  EditableTanstackTable,
+  NonEditableTanstackTable,
+} from "./utils";
+
+declare module "@tanstack/react-table" {
+  // eslint-disaxxble-next-line @typescript-eslint/no-unused-vars
+  interface TableMeta<TData extends RowData> {
+    addRow: (rowIndex: number, columnId: string, value: unknown) => void;
+    removeRow: (rowIndex: number, columnId: string, value: unknown) => void;
+    updateData: (rowIndex: number, columnId: string, value: unknown) => void;
+    duplicateRow: (rowIndex: number, value: TData) => void;
+    orderRow: (newIndex: number, oldIndex: number) => void;
+  }
+}
+
+export default function TanstackTable<TData, TValue>({
+  data,
+  rowCount,
+  columns,
+  columnOrder,
+  columnVisibility,
+  pinColumns,
+  rowActions,
+  tableActions,
+  selectedRowAction,
+  expandedRowComponent,
+  fillerColumn,
+  editable,
+  excludeColumns,
+  onTableDataChange,
+  filters,
+  title,
+  resizeable = true,
+  showPagination = true,
+}: TanstackTablePropsType<TData, TValue>) {
+  const commonProps = {
+    pinColumns,
+    columnOrder,
+    columnVisibility,
+    rowActions,
+    tableActions,
+    selectedRowAction,
+    excludeColumns,
+    expandedRowComponent,
+    title,
+    resizeable,
+  };
+  if (editable) {
+    return (
+      <TanstackBase<TData, TValue>
+        {...commonProps}
+        {...EditableTanstackTable({ initialData: data, onTableDataChange })}
+        columns={columns}
+        editable
+        fillerColumn={fillerColumn}
+      />
+    );
+  }
+  return (
+    <TanstackBase<TData, TValue>
+      {...commonProps}
+      {...NonEditableTanstackTable(data, rowCount || 0)}
+      columns={columns}
+      editable={false}
+      filters={filters}
+      fillerColumn={fillerColumn}
+      showPagination={showPagination}
+    />
+  );
+}
+
+function TanstackBase<TData, TValue>(props: TanstackBaseProps<TData, TValue>) {
+  const {
+    data,
+    columns,
+    columnOrder,
+    rowCount,
+    columnVisibility,
+    pinColumns,
+    rowActions,
+    tableActions,
+    selectedRowAction,
+    expandedRowComponent,
+    fillerColumn,
+    editable,
+    excludeColumns,
+    onPaginationChange,
+    onColumnFiltersChange,
+    columnFilters,
+    pagination,
+    filters,
+    meta,
+    showPagination,
+    title,
+    resizeable,
+  } = props;
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [colVisibility, setColumnVisibility] = useState<VisibilityState>(
+    columnVisibility
+      ? Object.fromEntries(
+          columns.map((col) => [
+            col.id || "",
+
+            columnVisibility?.columns.includes(
+              (col.id || "") as keyof TData
+            ) ===
+              (columnVisibility.type === "show"),
+          ])
+        )
+      : {}
+  );
+  const [rowAction, setRowAction] = useState<
+    (TanstackTableRowActionsType<TData> & { row: TData }) | null
+  >(null);
+  const [tableAction, setTableAction] =
+    useState<TanstackTableTableActionsType<TData> | null>(null);
+
+  const tableColumns = useMemo(() => {
+    const _columns = [...columns].filter(
+      (col) => !excludeColumns?.includes(col.id as keyof TData)
+    );
+
+    if (rowActions) {
+      _columns.push({
+        id: "actions",
+        cell: ({ row }) =>
+          CellWithActions(table, row, rowActions, setRowAction),
+      });
+    }
+    if (!resizeable) return _columns;
+    return _columns.map((col) => ({
+      ...col,
+      minSize: fillerColumn === col.id ? 600 : undefined,
+    }));
+  }, [columns, rowActions]);
+
+  const getRowId = useCallback(
+    (row: TData, index: number) =>
+      editable ? index.toString() : (row as TData & { id: string }).id,
+    []
+  );
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    getRowId,
+    columnResizeMode: "onChange",
+    columnResizeDirection: "ltr",
+    state: {
+      sorting,
+      columnVisibility: colVisibility,
+      columnFilters,
+      pagination,
+    },
+    initialState: {
+      columnOrder: columnOrder as string[],
+      columnPinning: {
+        left: [
+          "expanded-content",
+          "select",
+          ...((pinColumns as string[]) ?? []),
+        ],
+        right: ["actions"],
+      },
+    },
+    enableRowSelection: true,
+    enableColumnResizing: true,
+    enableColumnPinning: true,
+    manualPagination: true,
+    getRowCanExpand: () => !!expandedRowComponent,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    getPaginationRowModel: getPaginationRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    onPaginationChange,
+    onColumnFiltersChange,
+    rowCount,
+    meta,
+  });
+  return (
+    <div className="flex flex-col gap-2 overflow-hidden">
+      <TanstackTableToolbar<TData>
+        title={title}
+        table={table}
+        filters={filters}
+        selectedRowAction={selectedRowAction}
+        tableActions={tableActions}
+        tableData={data}
+        setTableAction={setTableAction}
+        editable={editable}
+      />
+      <div className="rounded-md border overflow-auto flex-1 h-0 max-h-max">
+        <TanstackTablePlainTable
+          resizeable={resizeable}
+          table={table}
+          columns={tableColumns}
+          editable={editable}
+          expandedRowComponent={expandedRowComponent}
+          fillerColumn={fillerColumn}
+        />
+      </div>
+      {pagination && showPagination && (
+        <TanstackTablePagination table={table} pagination={pagination} />
+      )}
+      <TanstackTableActionDialogs
+        tableAction={tableAction}
+        setTableAction={setTableAction}
+        rowAction={rowAction}
+        setRowAction={setRowAction}
+      />
+    </div>
+  );
+}