pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/Table/Components/useTable.ts

@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import {
+  ColumnSortingProps,
+  DataObject,
+  TableHeaderProps,
+} from "../TableProps";
+import { globalSearchFilter, SortMultiColumnData } from "../../../Utils/table";
+
+type UseTableProps = {
+  tableBorderColor?: string;
+  data: DataObject[];
+  isPagination: boolean;
+  selections?: (string | number)[];
+  columns: TableHeaderProps[];
+  onSelection?: (selected: (string | number)[]) => void;
+  tablePreferences?: Record<string, any>;
+  savePreferences?: (data: Record<string, any>) => void;
+  noOfRowsPerPage?: number;
+  isServerPagination: boolean;
+  totalRecords: number;
+};
+
+const defaultPageSize = 50;
+
+const useTable = ({
+  tableBorderColor,
+  data,
+  isPagination,
+  selections,
+  onSelection,
+  tablePreferences,
+  savePreferences,
+  noOfRowsPerPage,
+  isServerPagination,
+  totalRecords,
+  columns,
+}: UseTableProps) => {
+  const theme = useCustomTheme();
+
+  const headerRefs = useRef<(HTMLTableCellElement | null)[]>([]);
+
+  const [columnWidths, setColumnWidths] = useState<number[]>([]);
+  const [selection, setSelection] = useState<(string | number)[]>(
+    selections ?? []
+  );
+  const [columnsSort, setColumnsSort] = useState<ColumnSortingProps[]>([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(
+    noOfRowsPerPage ?? defaultPageSize
+  );
+
+  const tableData = useMemo(() => data, [data]);
+  const [filteredData, setFilteredData] = useState(tableData);
+  const [columnsList, setColumnsList] = useState(columns);
+
+  useEffect(() => {
+    if (tablePreferences) {
+      const columnPreference = tablePreferences.columns;
+      if (columnPreference?.length) {
+        setColumnsList(columnPreference);
+      }
+    }
+  }, [tablePreferences]);
+
+  useEffect(() => {
+    setFilteredData(tableData);
+  }, [tableData]);
+
+  const tableContainerStyles = useMemo(
+    () => ({
+      borderRadius: "10px 0 0 10px",
+      borderWidth: "0px 0px 0px 5px",
+      borderColor: tableBorderColor ?? theme.colors?.gray[500],
+      boxShadow: theme.shadows.lg,
+      maxHeight: "50vh",
+      overflowY: "auto",
+    }),
+    [tableBorderColor, theme]
+  );
+
+  const isContent = useMemo(
+    () => tableData.some((o) => o.content),
+    [tableData]
+  );
+  const isLink = useMemo(
+    () => tableData.some((o) => o.onLink || o.onDelete || o.onEdit),
+    [tableData]
+  );
+
+  useEffect(() => {
+    const widths = headerRefs.current.map((ref) => ref?.offsetWidth || 0);
+    setColumnWidths(widths);
+  }, []);
+
+  const pages = useMemo(() => {
+    if (isServerPagination) {
+      return Math.ceil(totalRecords / (noOfRowsPerPage ?? 1));
+    }
+    return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+  }, [
+    isPagination,
+    rowsPerPage,
+    tableData.length,
+    totalRecords,
+    isServerPagination,
+    noOfRowsPerPage,
+  ]);
+  const startRow = useMemo(
+    () => (!isPagination ? 0 : currentPage * rowsPerPage),
+    [currentPage, isPagination, rowsPerPage]
+  );
+  const endRow = useMemo(
+    () => (!isPagination ? tableData.length : startRow + rowsPerPage),
+    [isPagination, rowsPerPage, startRow, tableData.length]
+  );
+
+  useEffect(() => {
+    if (isServerPagination) {
+      return setFilteredData(tableData);
+    }
+    const sortedData = SortMultiColumnData(tableData, columnsSort);
+    const data = sortedData.slice(startRow, endRow);
+    return setFilteredData(data);
+  }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
+
+  const handlePageSizeChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const value = Number(event.target.value);
+    setRowsPerPage(value !== 0 ? value : defaultPageSize);
+    setCurrentPage(0);
+  };
+
+  const handleSort = useCallback(
+    (field: string | number, sort: "asc" | "desc" | "none") => {
+      if (!sort) return;
+      const newSortState = [...columnsSort];
+      const existingIndex = newSortState.findIndex(
+        (sort) => sort.column === field
+      );
+
+      if (existingIndex === -1) {
+        newSortState.push({
+          column: field,
+          direction: "asc", // Default to ascending when adding a column
+        });
+      } else {
+        const existingSort = newSortState[existingIndex];
+        existingSort.direction = sort;
+      }
+
+      setColumnsSort(newSortState);
+    },
+    [columnsSort]
+  );
+  useEffect(() => {
+    setSelection(selections ?? []);
+  }, [selections]);
+
+  const handleCheckbox = useCallback(
+    (id: string | number) => {
+      let selectedItems = [];
+      if (id === 0) {
+        if (selection.length === tableData.length) {
+          selectedItems = [];
+        } else {
+          selectedItems = tableData.map((item) => item.id);
+        }
+      } else if (selection.includes(id)) {
+        selectedItems = selection.filter((item) => item !== id);
+      } else {
+        selectedItems = [...selection, id];
+      }
+      setSelection(selectedItems);
+      onSelection && onSelection(selectedItems);
+    },
+    [onSelection, selection, tableData]
+  );
+
+  const handleColumnPreferences = (columns: any) => {
+    setColumnsList(columns);
+    savePreferences &&
+      savePreferences({
+        ...tablePreferences,
+        columns: columns,
+      });
+  };
+
+  const handleGlobalSearch = (query: string) => {
+    if (!query) setFilteredData(tableData);
+    setFilteredData(globalSearchFilter(tableData, query));
+  };
+
+  return {
+    tableData,
+    tableContainerStyles,
+    isContent,
+    isLink,
+    headerRefs,
+    columnWidths,
+    handleSort,
+    handleCheckbox,
+    filteredData,
+    startRow,
+    endRow,
+    selection,
+    columnsSort,
+    handlePageSizeChange,
+    pages,
+    currentPage,
+    rowsPerPage,
+    setCurrentPage,
+    columnsList,
+    handleColumnPreferences,
+    handleGlobalSearch,
+  };
+};
+
+export default useTable;

package/src/Components/Table/Table.stories.tsx

@@ -0,0 +1,48 @@
+// // Import React and the Table component
+// import React from 'react';
+// import Table from './Table';
+// import { TableProps } from './TableProps';
+// // Import Storybook's required modules
+// import { StoryFn, Meta } from '@storybook/react';
+// import { fn } from '@storybook/test';
+
+// // Define default export with component metadata
+// export default {
+//     title: 'Components/Table/Table',
+//     component: Table,
+// } as Meta;
+
+// const Template: StoryFn<TableProps> = (args) => <Table {...args} />;
+
+// export const Default = Template.bind({});
+// Default.args = {
+//     headers: [
+//         { label: 'name', accessor_key: "name", sort: false, search: false, columnFreeze: true },
+//         { label: 'email', accessor_key: "email", sort: true, search: true, columnFreeze: true },
+//         { label: 'role', accessor_key: "role", sort: true, search: true },
+//         { label: 'age', accessor_key: "age", sort: true, search: true },
+//         { label: 'age1', accessor_key: "age1", sort: true, search: true },
+//         { label: 'age2', accessor_key: "age2", sort: true, search: true },
+//         { label: 'age3', accessor_key: "age3", sort: true, search: true },
+//         { label: 'age4', accessor_key: "age4", sort: true, search: true },
+//         { label: 'age5', accessor_key: "age5", sort: true, search: true },
+//         { label: 'age6', accessor_key: "age6", sort: true, search: true },
+//         { label: 'age7', accessor_key: "age7", sort: true, search: true },
+//     ],
+//     data: [{
+//         id: 1,
+//         name: `User 1`,
+//         email: `user1@example.com`,
+//         role: 'Developer',
+//         age: 20,
+//         age1: 34,
+//         age2: 56,
+//         age3: 66,
+//         age4: 68,
+//         age5: 70,
+//         age6: 35,
+//         age7: 24,
+//     }],
+// };
+
+export {};

package/src/Components/Table/Table.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, TableContainer } from "@chakra-ui/react";
+import { Table as ChakraTable, Tbody, Thead } from "@chakra-ui/react";
+
+import { TableProps } from "./TableProps";
+import Pagination from "./Components/Pagination";
+import TableHeader from "./Components/TableHeader";
+import TableBody from "./Components/TableBody";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import useTable from "./Components/useTable";
+import { searchAndSortData } from "../../Utils/table";
+import {
+  useGetPreferences,
+  useSavePreferences,
+} from "../../Hooks/usePreferences";
+import TableSettings from "./TableSettings/TableSettings";
+import HeaderActions from "./Components/HeaderActions";
+import VeritcalDivider from "../Divider/Divider";
+import TableSearch from "./Components/TableSearch";
+
+export default function Table({
+  data,
+  columns,
+  onSelection,
+  isLoading,
+  isCheckbox = false,
+  headerBgColor,
+  freezedBgColor,
+  headerTextColor,
+  freezedTextColor,
+  tableBorderColor,
+  noBorders = false,
+  isPagination = true,
+  onRowClick,
+  selections,
+  isActionFreeze = true,
+  preferencesUrl = "",
+  preferencesKey = "",
+  preferencesName = "",
+  preferencesPage = "",
+  authToken = "",
+  paginationMode = "client",
+  noOfRowsPerPage = 50,
+  totalRecords = 0,
+  onPagination,
+  isTableSettings = false,
+  headerActions,
+}: TableProps) {
+  const theme: any = useCustomTheme();
+  const [columnsSearch, setColumnsSearch] = useState({});
+
+  const isServerPagination = paginationMode === "server";
+
+  const { preferences, loading } = useGetPreferences({
+    baseUrl: preferencesUrl,
+    page: preferencesPage,
+    key: preferencesKey,
+    name: preferencesName,
+    authToken: authToken,
+  });
+
+  const { savePreferences } = useSavePreferences({
+    baseUrl: preferencesUrl,
+    page: preferencesPage,
+    key: preferencesKey,
+    name: preferencesName,
+    authToken: authToken,
+  });
+
+  const isTableLoading = useMemo(() => {
+    return loading || isLoading;
+  }, [loading, isLoading]);
+
+  const tablePreferences = useMemo(() => {
+    if (preferences.length) {
+      return preferences[0].json;
+    }
+    return {};
+  }, [preferences]);
+
+  const {
+    tableData,
+    isContent,
+    isLink,
+    headerRefs,
+    columnWidths,
+    handleSort,
+    handleCheckbox,
+    filteredData,
+    startRow,
+    endRow,
+    selection,
+    columnsSort,
+    currentPage,
+    pages,
+    rowsPerPage,
+    handlePageSizeChange,
+    setCurrentPage,
+    columnsList,
+    handleColumnPreferences,
+    handleGlobalSearch,
+  } = useTable({
+    tableBorderColor,
+    data,
+    isPagination,
+    selections,
+    columns,
+    onSelection,
+    tablePreferences,
+    savePreferences,
+    noOfRowsPerPage,
+    totalRecords,
+    isServerPagination,
+  });
+
+  const _filteredData = useMemo(() => {
+    return searchAndSortData(filteredData, columnsSearch);
+  }, [columnsSearch, filteredData]);
+
+  useEffect(() => {
+    if (onPagination) {
+      onPagination(currentPage + 1, noOfRowsPerPage);
+    }
+  }, [currentPage, onPagination, noOfRowsPerPage]);
+
+  const tablePaginationText = `${startRow + 1} - ${endRow > tableData.length ? tableData.length : endRow} of ${isServerPagination ? totalRecords : tableData.length}`;
+
+  return (
+    <Box
+      bg={theme.colors?.background?.[50]}
+      border={`0.063rem solid ${theme.colors.border?.[500]}`}
+      borderRadius={3}
+    >
+      <Box
+        display={"flex"}
+        alignItems={"center"}
+        justifyContent={"space-between"}
+        px={3}
+        py={0}
+        height={45}
+        gap={2}
+      >
+        <TableSearch onSearch={handleGlobalSearch} />
+        {isTableSettings && (
+          <>
+            <VeritcalDivider />
+            <TableSettings
+              columns={columnsList}
+              onSave={(cols: any) => handleColumnPreferences(cols)}
+            />
+          </>
+        )}
+        {selection.length ? (
+          <>
+            <VeritcalDivider />
+            <HeaderActions actions={headerActions} selections={selection} />
+          </>
+        ) : null}
+        {(isPagination || isServerPagination) && (
+          <Box ml={"auto"}>
+            <Pagination
+              columns={columns}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              rowsPerPage={rowsPerPage}
+              pages={pages}
+              paginationText={tablePaginationText}
+              handlePageSizeChange={handlePageSizeChange}
+              dataLength={tableData.length}
+              isServerPagination={isServerPagination}
+              isVisiblity={true}
+            />
+          </Box>
+        )}
+      </Box>
+      <TableContainer maxH={500} overflowY={"auto"}>
+        <ChakraTable
+          variant="simple"
+          size="sm"
+          overflowX="scroll"
+          minW="100%"
+          className="table_wrapper"
+          sx={{
+            width: "100%",
+            borderCollapse: "collapse",
+            "th .resize-handle": {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: "8px",
+              height: "100%",
+              cursor: "col-resize",
+              backgroundColor: "transparent",
+              zIndex: 999,
+            },
+          }}
+        >
+          <Thead position="sticky" top={-0.5} zIndex={2}>
+            <TableHeader
+              columns={columnsList}
+              isCheckbox={isCheckbox}
+              headerBgColor={
+                headerBgColor ?? theme.colors.backgroundColor.muted
+              }
+              headerTextColor={headerTextColor ?? theme.colors?.gray[600]}
+              freezedBgColor={
+                freezedBgColor ?? theme.colors.backgroundColor.secondary
+              }
+              freezedTextColor={freezedTextColor ?? theme.colors?.gray[600]}
+              handleSort={handleSort}
+              headerRefs={headerRefs}
+              columnWidths={columnWidths}
+              columnsSort={columnsSort}
+              noBorders={noBorders}
+              handleCheckbox={handleCheckbox}
+              isLoading={isTableLoading}
+              checked={
+                tableData.length !== 0 && selection.length === tableData.length
+                  ? true
+                  : selection.length === 0
+                    ? false
+                    : "indeterminate"
+              }
+              isContent={isContent}
+              isLink={isLink}
+              isActionFreeze={isActionFreeze}
+              setColumnsSearch={setColumnsSearch}
+              columnsSearch={columnsSearch}
+            />
+          </Thead>
+
+          <Tbody>
+            <TableBody
+              data={_filteredData}
+              columns={columnsList}
+              startRow={startRow}
+              endRow={endRow}
+              isCheckbox={isCheckbox}
+              columnWidths={columnWidths}
+              noBorders={noBorders}
+              freezedBgColor={
+                freezedBgColor ?? theme.colors.backgroundColor.secondary
+              }
+              freezedTextColor={freezedTextColor ?? theme.colors?.gray[600]}
+              handleCheckbox={handleCheckbox}
+              selections={selection}
+              isLoading={isTableLoading}
+              onRowClick={onRowClick}
+              isContent={isContent}
+              isLink={isLink}
+              isActionFreeze={isActionFreeze}
+            />
+          </Tbody>
+        </ChakraTable>
+      </TableContainer>
+    </Box>
+  );
+}

package/src/Components/Table/TableProps.tsx

@@ -0,0 +1,163 @@
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
+
+export type TableProps = {
+  data: DataObject[];
+  columns: TableHeaderProps[];
+  handleExportChange?: (value: string) => void | undefined;
+  exportOptions?: ExportOption[];
+  exportLabel?: string;
+  isLoading?: boolean;
+  // loadingType?: "skeleton" | "spinner";
+  // loadingContaxt?: ReactNode;
+  // loadingBoxStyle?: React.CSSProperties;
+  isVisiblity?: boolean;
+  isCheckbox?: boolean;
+  headerBgColor?: string;
+  freezedBgColor?: string;
+  headerTextColor?: string;
+  freezedTextColor?: string;
+  tableBorderColor?: string;
+  noBorders?: boolean;
+  onSelection?: (selected: (string | number)[]) => void;
+  isPagination?: boolean;
+  selections?: (string | number)[];
+  onRowClick?: (
+    row: DataObject,
+    header: Record<string | number, string | number>
+  ) => void;
+  isActionFreeze?: boolean;
+  preferencesUrl?: string;
+  preferencesKey?: string;
+  preferencesName?: string;
+  preferencesPage?: string;
+  authToken?: string;
+  paginationMode?: "client" | "server";
+  noOfRowsPerPage?: number;
+  totalRecords?: number;
+  onPagination?: (page: number, noOfRecords: number) => void;
+  isTableSettings?: boolean;
+  headerActions?: HeaderActionsProps;
+};
+
+export type HeaderActionsProps = {
+  isDelete?: {
+    enabled?: boolean;
+    onClick?: (selection: (string | number)[]) => void;
+  };
+  isUpdate?: {
+    enabled?: boolean;
+    onClick?: (selection: (string | number)[]) => void;
+  };
+  items?: {
+    icon: React.ReactElement;
+    name: string;
+    onClick?: (selection: (string | number)[]) => void;
+  }[];
+};
+
+export type DataObject = {
+  [key: string]: string | number | any;
+};
+
+export type TableHeaderProps = {
+  label: string | number;
+  id: string | number;
+  isSort?: boolean;
+  isSearch?: boolean;
+  isFreeze?: boolean;
+  isHidden?: boolean;
+  node?: (data: DataObject) => JSX.Element | string | number | undefined;
+};
+
+export type ExportOption = {
+  label: string;
+  id: string;
+};
+
+export type ColumnSortingProps = {
+  column: string | number;
+  direction: "asc" | "desc" | "none";
+};
+
+export type TableHeaderPageProps = Pick<
+  TableProps,
+  | "columns"
+  | "isCheckbox"
+  | "headerBgColor"
+  | "headerTextColor"
+  | "freezedBgColor"
+  | "freezedTextColor"
+  | "noBorders"
+  | "isLoading"
+  | "isActionFreeze"
+> & {
+  handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
+  activeHeader?: string | null;
+  isPopoverOpen?: boolean;
+  closePopover?: () => void;
+  searchFeatures?: (header: string) => React.ReactNode;
+  // hoveredHeaderIndex: number | null;
+  handleHeaderClick?: (header: string, search: boolean) => void;
+  headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
+  columnWidths: number[];
+  columnsSort: ColumnSortingProps[];
+  handleCheckbox: (selection: string | number) => void;
+  checked: boolean | "indeterminate";
+  isContent: boolean;
+  isLink: boolean;
+  setColumnsSearch: React.Dispatch<
+    React.SetStateAction<Record<string, string>>
+  >;
+  columnsSearch: Record<string, string>;
+};
+
+export type TableBodyPageProps = Pick<
+  TableProps,
+  | "columns"
+  | "isCheckbox"
+  | "data"
+  | "freezedBgColor"
+  | "freezedTextColor"
+  | "noBorders"
+  | "isLoading"
+  | "onRowClick"
+  | "isActionFreeze"
+> & {
+  startRow: number;
+  endRow: number;
+  columnWidths: number[];
+  handleCheckbox: (selection: string | number) => void;
+  selections: (string | number)[];
+  isContent: boolean;
+  isLink: boolean;
+};
+
+export type TableFiltersProps = {
+  header: DataObject;
+  setColumnsSearch: (searchVal: string) => void;
+  columnsSearch: string;
+  onClose: () => void;
+};
+
+export type ColumnHeaderProps = Pick<
+  TableProps,
+  | "isCheckbox"
+  | "headerBgColor"
+  | "headerTextColor"
+  | "freezedBgColor"
+  | "freezedTextColor"
+  | "noBorders"
+> &
+  Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+    header: TableHeaderProps;
+    index: number;
+    columnWidths: number[];
+    headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnsSearch: Record<string, string>;
+    setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
+  };
+
+export type SortingProps = {
+  isSorting: ColumnSortingProps | undefined;
+  header: TableHeaderProps;
+};