rez-table-listing-mui 0.0.3 → 0.0.5

package/src/components/table-body.tsx

@@ -5,7 +5,10 @@ import {
   Row,
   Table,
 } from "@tanstack/react-table";
-import { CraftTableFeatureProps } from "../types/table-options";
+import {
+  CraftTableFeatureProps,
+  CraftTableOptionsProps,
+} from "../types/table-options";
 import { align } from "../types/common";
 import DragAlongCell from "./table-body-dnd-cell";
 import {
@@ -20,6 +23,7 @@ interface TableBodyProps<T> {
   featureOptions: CraftTableFeatureProps;
   NestedComponent?: React.ComponentType<{ row: Row<T> }>;
   columnOrder: ColumnOrderState;
+  tableStates: CraftTableOptionsProps;
 }
 
 function TableBody<T>({
@@ -27,9 +31,11 @@ function TableBody<T>({
   featureOptions,
   NestedComponent,
   columnOrder,
+  tableStates,
 }: TableBodyProps<T>) {
-  const { enableWordBreakAll, enableColumnReordering, enableRowSelection } =
-    featureOptions;
+  const { enableColumnReordering, enableRowSelection } = featureOptions;
+
+  const { wrapColumns } = tableStates;
 
   const renderRow = (row: Row<T>) => {
     const renderedRow = (
@@ -58,7 +64,10 @@ function TableBody<T>({
             style: {
               ...getColumnPinningStylesBody(cell.column),
               width: cell.column.getSize(),
-              ...(enableWordBreakAll && { wordBreak: "break-all" }),
+              ...(wrapColumns[cell.column.id] && {
+                wordBreak: "break-all",
+                // whiteSpace: "normal",
+              }),
             } as React.CSSProperties,
             align: (cell.column.columnDef.meta as align)?.align || "left",
           };
@@ -69,7 +78,11 @@ function TableBody<T>({
               items={columnOrder}
               strategy={horizontalListSortingStrategy}
             >
-              <DragAlongCell cell={cell} featureOptions={featureOptions} />
+              <DragAlongCell
+                cell={cell}
+                featureOptions={featureOptions}
+                tableStates={tableStates}
+              />
             </SortableContext>
           ) : (
             <td key={cell?.id} {...tdProps}>
@@ -82,17 +95,14 @@ function TableBody<T>({
 
     if (row.getIsExpanded()) {
       return (
-        console.log("row.getIsExpanded() in table-head", row.getIsExpanded()),
-        (
-          <React.Fragment key={row.id}>
-            {renderedRow}
-            <tr>
-              <td colSpan={table.getAllLeafColumns().length}>
-                {NestedComponent && <NestedComponent {...{ row }} />}
-              </td>
-            </tr>
-          </React.Fragment>
-        )
+        <React.Fragment key={row.id}>
+          {renderedRow}
+          <tr>
+            <td colSpan={table.getAllLeafColumns().length}>
+              {NestedComponent && <NestedComponent {...{ row }} />}
+            </td>
+          </tr>
+        </React.Fragment>
       );
     } else {
       return renderedRow;

package/src/components/table-dnd.tsx

@@ -22,6 +22,7 @@ function TableDND<T>({
   columnOrder,
   setColumnOrder,
   isCompactTable,
+  tableStates,
 }: CraftTableComponentProps<T>) {
   const sensors: SensorDescriptor<SensorOptions>[] = useSensors(
     useSensor(MouseSensor, {}),
@@ -54,6 +55,7 @@ function TableDND<T>({
         columnOrder={columnOrder}
         setColumnOrder={setColumnOrder}
         isCompactTable={isCompactTable}
+        tableStates={tableStates}
       />
     </DndContext>
   );

package/src/components/table-head-dnd-cell.tsx

@@ -15,12 +15,12 @@ import TableHeadPopover from "./table-head-popover";
 function DraggableTableHeader<T>({
   header,
   featureOptions,
+  tableStates,
 }: TableHeaderProps<T>) {
   const { enableColumnPinning } = featureOptions;
 
   // Popover
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [wrap, setWrap] = useState(false);
 
   const handleHover = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl((prev) => (prev ? null : event.currentTarget));
@@ -30,10 +30,6 @@ function DraggableTableHeader<T>({
     setAnchorEl(null);
   };
 
-  const toggleWrap = () => {
-    setWrap((prev) => !prev);
-  };
-
   const { isDragging, transform, attributes, listeners } = useSortable({
     id: header.column.id,
   });
@@ -108,7 +104,11 @@ function DraggableTableHeader<T>({
           </div>
 
           {enableColumnPinning && (
-            <TableHeadPin header={header} featureOptions={featureOptions} />
+            <TableHeadPin
+              header={header}
+              featureOptions={featureOptions}
+              tableStates={tableStates}
+            />
           )}
 
           <div {...attributes} {...listeners} className="ts__dnd__button">
@@ -134,8 +134,7 @@ function DraggableTableHeader<T>({
         anchorEl={anchorEl}
         onClose={handleClose}
         header={header}
-        wrap={wrap}
-        onToggleWrap={toggleWrap}
+        tableStates={tableStates}
       />
     </th>
   );

package/src/components/table-head-popover.tsx

@@ -14,26 +14,34 @@ import {
   IconPinOffOutline,
   IconPinOutline,
 } from "../assets/svg";
+import { CraftTableOptionsProps } from "../types/table-options";
 
 type Props<T> = {
   anchorEl: HTMLElement | null;
   onClose: () => void;
   header: Header<T, unknown>;
-  wrap: boolean;
-  onToggleWrap: () => void;
+  tableStates: CraftTableOptionsProps;
 };
 
 function TableHeadPopover<T>({
   anchorEl,
   onClose,
   header,
-  wrap,
-  onToggleWrap,
+  tableStates,
 }: Props<T>) {
   const open = Boolean(anchorEl);
   const column = header.column;
   const isPinned = column.getIsPinned() === "left";
 
+  const { wrapColumns, setWrapColumns } = tableStates;
+
+  const toggleWrapForColumn = (columnId: string) => {
+    setWrapColumns((prev: Record<string, boolean>) => ({
+      ...prev,
+      [columnId]: !prev[columnId],
+    }));
+  };
+
   return (
     <Popover
       open={open}
@@ -75,7 +83,10 @@ function TableHeadPopover<T>({
 
         <ListItemButton>
           <ListItemText primary="Wrap Cell" />
-          <Switch checked={wrap} onChange={onToggleWrap} />
+          <Switch
+            checked={wrapColumns[column.id]}
+            onChange={() => toggleWrapForColumn(column.id)}
+          />
         </ListItemButton>
       </List>
     </Popover>

package/src/components/table-head.tsx

@@ -1,7 +1,10 @@
 import { ColumnOrderState, flexRender, Table } from "@tanstack/react-table";
-import { CraftTableFeatureProps } from "../types/table-options";
+import {
+  CraftTableFeatureProps,
+  CraftTableOptionsProps,
+} from "../types/table-options";
 import { DownArrow, UpArrow } from "../assets/svg";
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
 import {
   getColumnAlignment,
   getColumnPinningStyles,
@@ -14,17 +17,20 @@ import {
 import DraggableTableHeader from "./table-head-dnd-cell";
 import TableHeadPin from "./table-head-pin";
 import Checkbox from "./inputs/checkbox";
+import TableHeadPopover from "./table-head-popover";
 
 interface TableHeadProps<T> {
   table: Table<T>;
   featureOptions: CraftTableFeatureProps;
   columnOrder: ColumnOrderState;
+  tableStates: CraftTableOptionsProps;
 }
 
 function TableHead<T>({
   table,
   featureOptions,
   columnOrder,
+  tableStates,
 }: TableHeadProps<T>) {
   const {
     stickyHeader,
@@ -33,6 +39,22 @@ function TableHead<T>({
     enableRowSelection,
   } = featureOptions;
 
+  // Popover
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [wrap, setWrap] = useState(false);
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const toggleWrap = () => {
+    setWrap((prev) => !prev);
+  };
+
+  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl((prev) => (prev ? null : event.currentTarget));
+  };
+
   return (
     <thead className={`ts__head ${stickyHeader ? "ts--sticky" : ""}`.trim()}>
       {table.getHeaderGroups().map((headerGroup) => (
@@ -91,6 +113,7 @@ function TableHead<T>({
                 <DraggableTableHeader
                   header={header}
                   featureOptions={featureOptions}
+                  tableStates={tableStates}
                 />
               </SortableContext>
             ) : (
@@ -104,6 +127,7 @@ function TableHead<T>({
                   minWidth: `${header.column.columnDef.minSize}px`,
                   maxWidth: `${header.column.columnDef.maxSize}px`,
                 }}
+                onClick={handleHover}
               >
                 {header.isPlaceholder ? null : (
                   <div {...sortProps}>
@@ -128,6 +152,7 @@ function TableHead<T>({
                       <TableHeadPin
                         header={header}
                         featureOptions={featureOptions}
+                        tableStates={tableStates}
                       />
                     )}
                   </div>
@@ -144,6 +169,15 @@ function TableHead<T>({
                     }`}
                   />
                 ) : null}
+
+                {/* Popover */}
+                {/* <TableHeadPopover
+                  anchorEl={anchorEl}
+                  onClose={handleClose}
+                  header={header}
+                  wrap={wrap}
+                  tableStates={tableStates}
+                /> */}
               </th>
             );
           })}

package/src/components/table.tsx

@@ -9,6 +9,7 @@ function Table<T>({
   NestedComponent,
   columnOrder,
   isCompactTable,
+  tableStates,
 }: CraftTableComponentProps<T>) {
   const { striped } = featureOptions;
 
@@ -24,12 +25,14 @@ function Table<T>({
         table={table}
         featureOptions={featureOptions}
         columnOrder={columnOrder}
+        tableStates={tableStates}
       />
       <TableBody
         table={table}
         featureOptions={featureOptions}
         NestedComponent={NestedComponent}
         columnOrder={columnOrder}
+        tableStates={tableStates}
       />
     </table>
   );

package/src/components/topbar/index.scss

@@ -3,14 +3,13 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 2.5rem;
+    // min-height: 2.5rem;
     background-color: #fff;
 
     .right-section {
       display: flex;
       justify-content: center;
       // gap: 0.4rem;  // All icons gap
-
       .search-wrapper {
         display: flex;
         align-items: center;

package/src/components/topbar/index.tsx

@@ -16,6 +16,7 @@ import ViewMore from "../viewmore";
 import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
+import { CraftTableOptionsProps } from "../../types/table-options.ts";
 
 interface TopbarProps<T> {
   table: Table<T>;
@@ -26,6 +27,7 @@ interface TopbarProps<T> {
   topbarOptions?: TopbarOptionsProps;
   columnOrder?: string[];
   setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
+  tableStates?: CraftTableOptionsProps;
 }
 
 function Topbar<T>({
@@ -53,7 +55,7 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
+  // console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
 
   // sync column order with table instance
   useEffect(() => {

package/src/components/viewmore/index.tsx

@@ -20,6 +20,7 @@ interface ViewMorePopoverProps {
   onFullscreenToggle: () => void;
   groupBy: string;
   onGroupByChange: (value: string) => void;
+  // tableStates: CraftTableOptionsProps;
 }
 
 const ViewMore = ({
@@ -45,6 +46,17 @@ const ViewMore = ({
     setAnchorEl(null);
   };
 
+  // const { wrapColumns, globalWrapColumns, setGlobalWrapColumns } = tableStates;
+
+  // const toggleGlobalWrap = (value: boolean | null) => {
+  //   setGlobalWrapColumns(value); // true = wrap all, false = un-wrap all, null = use wrapState
+  // };
+
+  // const isWrapped =
+  //   globalWrapColumns !== null
+  //     ? globalWrapColumns
+  //     : !!wrapColumns[cell.column.id];
+
   return (
     <>
       <div onClick={handleClick}>

package/src/libs/hooks/useCraftTable.tsx

@@ -15,6 +15,10 @@ export function useCraftTable() {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [expanded, setExpanded] = useState<ExpandedState>({});
+  const [wrapColumns, setWrapColumns] = useState<Record<string, boolean>>({});
+  const [globalWrapColumns, setGlobalWrapColumns] = useState<boolean | null>(
+    null
+  );
 
   if (pagination.pageIndex < 0 || pagination.pageSize <= 0) {
     throw new Error(
@@ -31,6 +35,10 @@ export function useCraftTable() {
     setRowSelection: setRowSelection,
     expanded: expanded,
     setExpanded: setExpanded,
+    wrapColumns: wrapColumns,
+    setWrapColumns: setWrapColumns,
+    globalWrapColumns: globalWrapColumns,
+    setGlobalWrapColumns: setGlobalWrapColumns,
   };
 
   return craftTableOptions;

package/src/libs/hooks/useDefaultColumns.tsx

@@ -11,7 +11,7 @@ export const useDefaultColumns = () => {
         header: "First Name",
         id: "firstName",
         accessorKey: "firstName",
-        meta: { label: "First Name" },
+        // meta: { label: "First Name" },
         // header: ({ table }) => (
         //   <>
         //     <button
@@ -57,7 +57,13 @@ export const useDefaultColumns = () => {
         header: "Last Name",
         accessorKey: "lastName",
         size: 100,
-        meta: { label: "Last Name" },
+        meta: { wrap: true },
+      },
+      {
+        header: "Email Id",
+        accessorKey: "email",
+        size: 150,
+        meta: { label: "Email" },
       },
       {
         header: "Age",

package/src/libs/utils/make-hierar-data.ts

@@ -8,6 +8,7 @@ export type Person = {
   progress: number;
   status: "Active" | "Inactive";
   department?: string;
+  email?: string;
   subRows?: Person[];
 };
 
@@ -26,6 +27,7 @@ const newPerson = (): Person => {
     age: faker.number.int(40),
     visits: faker.number.int(1000),
     progress: faker.number.int(100),
+    email: faker.internet.email(),
     department: faker.helpers.shuffle<string>([
       "HR",
       "Engineering",

package/src/types/common.ts

@@ -28,3 +28,13 @@ export type alignProps = "left" | "center" | "right";
 export interface align {
   align: alignProps;
 }
+
+export const camelCaseToTitle = (str: string): string => {
+  if (!str) return "";
+
+  return str
+    .replace(/_/g, " ") // Replace underscores with spaces
+    .replace(/([a-z])([A-Z])/g, "$1 $2") // Add space between camelCase transitions
+    .replace(/\b\w/g, (char) => char.toUpperCase()) // Capitalize each word's first letter
+    .trim();
+};

package/src/types/table-options.ts

@@ -17,6 +17,10 @@ export interface CraftTableOptionsProps {
   setIsCompactTable?: Dispatch<SetStateAction<boolean>>;
   expanded: ExpandedState;
   setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+  wrapColumns: Record<string, boolean>;
+  setWrapColumns: Dispatch<SetStateAction<Record<string, boolean>>>;
+  globalWrapColumns: boolean | null;
+  setGlobalWrapColumns: Dispatch<SetStateAction<boolean | null>>;
 }
 
 export interface CraftTableFeatureProps {

package/src/types/table.ts

@@ -57,9 +57,11 @@ export interface CraftTableComponentProps<T> {
   columnOrder: ColumnOrderState;
   setColumnOrder: React.Dispatch<React.SetStateAction<ColumnOrderState>>;
   isCompactTable: boolean;
+  tableStates: CraftTableOptionsProps;
 }
 
 export interface TableHeaderProps<T> {
   header: Header<T, unknown>;
   featureOptions: CraftTableFeatureProps;
+  tableStates: CraftTableOptionsProps;
 }