@licklist/design 0.44.489 → 0.44.490

package/src/table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import { Meta, Story } from "@storybook/react";
 import { range } from "lodash";
-import React from "react";
+import React, { useRef } from "react";
 import { Router } from "../auth/Router";
 import {
   FilterHelperComponent as FilterHelper,
@@ -19,6 +19,13 @@ import {
   TableHelperComponent as TableHelper,
   TableHelperComponentProps,
 } from "./TableHelperComponent";
+import {
+  ReactTableHelperComponent as ReactTableHelper,
+  ReactTableHelperComponentProps,
+  ReactTableHelperRow,
+  ReactTableHelperComponentRef,
+} from "./ReactTableHelperComponent";
+import { flexRender } from "./utils/index";
 
 export default {
   title: "Table",
@@ -45,6 +52,40 @@ export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
   args
 ) => <PerPageHelper {...args} />;
 
+export const ReactTableHelperComponent: Story<
+  ReactTableHelperComponentProps<any>
+> = (args) => (
+  <>
+    <Router>
+      <ReactTableHelper {...args} />
+    </Router>
+  </>
+);
+
+const ComponentInsideRouter = (args) => {
+  const ref = useRef<ReactTableHelperComponentRef>(null);
+
+  return (
+    <ReactTableHelper
+      {...args}
+      ref={ref}
+      externalFilters={{ uniqField: "uniqField" }}
+    />
+  );
+};
+
+export const ReactTableHelperComponentWithColumns: Story<
+  ReactTableHelperComponentProps<any>
+> = (args) => {
+  return (
+    <>
+      <Router>
+        <ComponentInsideRouter {...args} />
+      </Router>
+    </>
+  );
+};
+
 const getPaginator = (perPage, items = 100) =>
   ({
     current_page: 1,
@@ -98,3 +139,88 @@ TableHelperComponent.args = {
 PaginationHelperComponent.args = {
   paginator: getPaginator(24, 100),
 };
+
+ReactTableHelperComponent.args = {
+  isLoading: false,
+  headers: [
+    {
+      title: "ID",
+      key: "id",
+      isSortable: true,
+      width: "600px",
+    },
+    "Title",
+    "Description",
+    "Action",
+  ],
+  paginator: getPaginator(24, 10),
+  renderItemFn: (row) => {
+    return (
+      <tr key={row.id}>
+        <td>{row.id}</td>
+        <td>{row.title}</td>
+        <td>{row.description}</td>
+        <td>ADD | REMOVE</td>
+      </tr>
+    );
+  },
+  striped: false,
+  bordered: false,
+  displayShowingSection: false,
+  initialOptions: {
+    page: 1,
+    perPage: 10,
+    sortKey: "id",
+    sortDirection: "desc",
+    filter: "",
+  },
+};
+
+ReactTableHelperComponentWithColumns.args = {
+  isLoading: false,
+  columns: [
+    {
+      accessorKey: "id",
+      header: () => "CustomHeader",
+    },
+    {
+      accessorKey: "title",
+      header: () => "SuperTitle",
+    },
+    {
+      accessorKey: "description",
+      header: () => "AwesomeDescription",
+    },
+    {
+      accessorKey: "actions",
+      header: () => "Incredible Actions",
+    },
+  ],
+  sortableColumns: ["id"],
+  paginator: getPaginator(24, 10),
+  renderRow: (row: ReactTableHelperRow<any>) => {
+    return (
+      <tr key={row.id}>
+        {row.getVisibleCells().map((cell) => {
+          return (
+            <td key={cell.id}>
+              {cell.column.id === "actions"
+                ? "ADD | REMOVE"
+                : flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </td>
+          );
+        })}
+      </tr>
+    );
+  },
+  striped: false,
+  bordered: false,
+  displayShowingSection: false,
+  initialOptions: {
+    page: 1,
+    perPage: 10,
+    sortKey: "id",
+    sortDirection: "desc",
+    filter: "",
+  },
+};

package/src/table/TableHelperComponent.tsx

@@ -14,6 +14,7 @@ import { FilterHelperComponent } from "./FilterHelperComponent";
 import { PaginationHelperComponent } from "./PaginationHelperComponent";
 import { PerPageHelperComponent } from "./PerPageHelperComponent";
 import { getFilterOptionsValue } from "./utils";
+import { ExtendedTableOptions } from "./types";
 
 export interface TableHelperComponentProps {
   headers: ITableHeader[];
@@ -31,7 +32,6 @@ export interface TableHelperComponentProps {
   initialOptions?: Partial<ITableProps>;
 }
 
-export type ExtendedTableOptions = ITableProps & { [key: string]: any };
 // @TODO Refactor? component to get less complexity
 // with query filter params. Now External filters use only in
 // one place of Dashboard.
@@ -42,6 +42,8 @@ export type ExtendedTableOptions = ITableProps & { [key: string]: any };
 
 /**
  * TableHelperComponent
+ * @deprecated use new ReactTableHelperComponent
+ * for default tables
  * @param props
  * @constructor
  */

package/src/table/hooks/useTableQueryOptions.ts

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { getFilterOptionsValue } from "../utils";
+import { TableComponentProps, ExtendedTableOptions } from "../types";
+
+export const useTableQueryOptions = <T extends object>({
+  initialOptions = {},
+  externalFilters = {},
+}: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
+  const query = useQuery();
+
+  const page = Number(getFilterOptionsValue(query, initialOptions, "page"));
+  const perPage = Number(
+    getFilterOptionsValue(query, initialOptions, "perPage")
+  );
+  const sortKey = String(
+    getFilterOptionsValue(query, initialOptions, "sortKey")
+  );
+  const sortDirection = String(
+    getFilterOptionsValue(query, initialOptions, "sortDirection")
+  );
+
+  const filter = String(getFilterOptionsValue(query, initialOptions, "filter"));
+
+  const [optionsCache, setOptionsCache] = useState<ExtendedTableOptions>();
+  const [options, setOptions] = useState<ExtendedTableOptions>({
+    page,
+    perPage,
+    sortKey,
+    sortDirection,
+    filter,
+  });
+  const [cachedExternalFilters, setCachedExternalFilters] =
+    useState<{ [key: string]: any }>(externalFilters);
+
+  return {
+    page,
+    perPage,
+    sortKey,
+    sortDirection,
+    filter,
+    optionsCache,
+    setOptionsCache,
+    options,
+    setOptions,
+    cachedExternalFilters,
+    setCachedExternalFilters,
+  };
+};

package/src/table/index.ts

@@ -4,3 +4,4 @@ export * from "./PerPageHelperComponent";
 export * from "./StaticTable";
 export * from "./TableHelperComponent";
 export * from "./MenuButton";
+export * from "./ReactTableHelperComponent";

package/src/table/types.ts

@@ -0,0 +1,47 @@
+import { ReactNode, CSSProperties } from "react";
+import {
+  TableOptions,
+  ColumnDef,
+  Row as TableRow,
+} from "@tanstack/react-table";
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
+import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
+
+export type ReactTableHelperRow<T extends object> = TableRow<T>;
+
+export type ExtendedTableOptions = ITableProps & { [key: string]: any };
+
+export interface TableComponentProps<T extends object>
+  extends Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel"> {
+  paginator?: ILengthAwarePaginator<T>;
+  isLoading?: boolean;
+  striped?: boolean;
+  bordered?: boolean;
+  displaySearchBar?: boolean;
+  displayPerPageSelect?: boolean;
+  displayShowingSection?: boolean;
+  externalFilters?: { [key: string]: any };
+  initialOptions?: Partial<ITableProps>;
+  sortableColumns?: string[];
+}
+
+export type TableColumnMeta = {
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export type TableComponentPropsWithOldTableData<T extends object> = {
+  headers: ITableHeader[];
+  renderItemFn: (row: T, index: number) => void;
+  columns?: never;
+  renderRow?: never;
+};
+
+export type TableComponentPropsWithReactTableData<T extends object> = {
+  headers?: never;
+  renderItemFn?: never;
+  columns: ColumnDef<T, any>[];
+  renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
+};

package/src/table/utils/index.ts

@@ -1,6 +1,8 @@
 import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
 import TableService from "@licklist/plugins/dist/services/Table/TableService";
 
+export { flexRender } from "@tanstack/react-table";
+
 const DEFAULT_QUERY_VALUES: { [key in keyof ITableProps]: string | number } = {
   page: TableService.DEFAULT_PAGE,
   perPage: TableService.DEFAULT_PER_PAGE,