Refactor table component and update Table.stories.jsx

caisy-io · Nov 14, 2023 · 915273d · 915273d
1 parent 81c0d40
commit 915273d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 103 deletions.
diff --git a/src/components/table/Table.stories.jsx b/src/components/table/Table.stories.jsx
@@ -11,20 +11,21 @@ function TableDemo() {
       name: "testName",
       lastName: "testLastNameas,mdnasmdnas,mdnas,mdn,masdn,masdajhsdasdgasd",
       id: 0,
+      test: { test: 1 },
       actions: {
         id: 0,
       },
     },
     ...new Array(PAGE_SIZE).fill(true).map((__, idx) => ({
       name: `testName ${1 + idx}`,
       lastName: `testLastName ${1 + idx}`,
-      actions: { id: 1 + idx },
       id: 1 + idx,
+      actions: { id: 1 + idx },
     })),
   ]);
   const columns = [
     {
-      header: "Name",
+      header: <div>Name</div>,
       key: "name", // key is the "key" in the data
     },
     {
@@ -36,7 +37,7 @@ function TableDemo() {
       key: "id",
     },
     {
-      header: "Actions",
+      header: <div>Actions</div>,
       key: "actions",
       renderItem: (data) => (
         <div style={{ display: "flex", gap: 8 }}>
@@ -90,7 +91,7 @@ function TableDemo() {
       />
       <Table
         // containerWidth={1200}
-        tableWidth={1400}
+        // tableWidth={1400}
         useConditionalItemSize
         renderAsFirstRow={
           <div

diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
@@ -67,7 +67,6 @@ export const Table: FC<ITable> = forwardRef(
   (
     {
       dataSource,
-      itemSize,
       isNextPageLoading,
       loadNextPage = () => null,
       loading,
@@ -78,7 +77,6 @@ export const Table: FC<ITable> = forwardRef(
       columns,
       renderAsFirstRow,
       empty,
-      useConditionalItemSize,
       tableWidth,
       containerMaxWidth,
     },
@@ -92,34 +90,10 @@ export const Table: FC<ITable> = forwardRef(
 
     const tableRowsRef = useRef<HTMLDivElement>(null);
 
-    const [innerColumns, setColumns] = useState<any[]>([]);
-
     const { height: containerHeight } = useDimensions(containerRef);
     const { height: headerHeight } = useDimensions(headerRef);
     const height = containerHeight - headerHeight;
 
-    useEffect(() => {
-      columns &&
-        setColumns(
-          columns.map((column) => {
-            return !!column.renderItem
-              ? {
-                  Header: column.header,
-                  accessor: column.key,
-                  Cell: (cellProps) => (column.renderItem as any)(cellProps.cell.value, cellProps.cell.row.index),
-                  defaultCanSort: column.defaultCanSort,
-                  style: column.style,
-                }
-              : {
-                  Header: column.header,
-                  accessor: column.key,
-                  defaultCanSort: column.defaultCanSort,
-                  style: column.style,
-                };
-          }),
-        );
-    }, [columns]);
-
     // Only load 1 page of items at a time.
     // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
     const loadMoreItems = isNextPageLoading ? () => {} : loadNextPage;
@@ -151,7 +125,8 @@ export const Table: FC<ITable> = forwardRef(
               minWidth: headerWidth,
             };
 
-            console.log({ row, column });
+            if (!column) return null;
+
             return (
               <STd
                 key={key}
@@ -169,39 +144,6 @@ export const Table: FC<ITable> = forwardRef(
           })}
         </STr>
       );
-
-      {
-        /* {row.cells.map((cell, cellIndex) => {
-              const header = document.getElementById(`header-${cellIndex}`);
-              const headerWidth = header?.offsetWidth || 0;
-
-              const headerStyle = {
-                width: headerWidth,
-                minWidth: headerWidth,
-              };
-
-              const isLastCell = cellIndex === row.cells.length - 1;
-
-              return (
-                <STd
-                  key={`cell-${row.id}-${cellIndex}`}
-                  id={`cell-${cellIndex}`}
-                  style={{
-                    textOverflow: "ellipsis",
-                    overflow: "hidden",
-                    display: "block",
-                    ...(!isLastCell ? headerStyle : {}),
-                    ...cell?.value?.style,
-                  }}
-                  {...cell.getCellProps()}
-                >
-                  {cell.render("Cell")}
-                </STd>
-              );
-            })} */
-      }
-
-      return null;
     };
 
     const debouncedLoadMoreItems = useMemo(() => debounce(loadMoreItems, 300), [loadMoreItems]);
@@ -215,11 +157,6 @@ export const Table: FC<ITable> = forwardRef(
       console.log((innerHeaderRef.current as HTMLDivElement).style.left);
     };
 
-    const memoItemSize = useMemo(
-      () => (item) => (itemSize as (data: any) => number)(item),
-      [dataSource, useConditionalItemSize],
-    );
-
     useEffect(() => {
       if (typeof window === "undefined") return;
 
@@ -299,19 +236,19 @@ export const Table: FC<ITable> = forwardRef(
       <STable
         style={{
           ...style,
-          // maxWidth: containerWidth,
+          maxWidth: containerWidth,
         }}
         ref={containerRef}
       >
         <SThead
           style={{
-            width: "auto",
+            width: tableWidth,
             maxWidth: containerWidth,
             height: innerHeaderRef?.current?.offsetHeight,
           }}
           ref={headerRef}
         >
-          <STr ref={innerHeaderRef} style={{ ...rowStyle, minWidth: tableWidth, position: "absolute" }}>
+          <STr ref={innerHeaderRef} style={{ ...rowStyle, minWidth: tableWidth, position: "absolute", width: "100%" }}>
             {columns.map((column, columnIndex) => {
               const id = `header-${columnIndex}`;
 
@@ -328,37 +265,6 @@ export const Table: FC<ITable> = forwardRef(
               );
             })}
           </STr>
-          {/* {headerGroups.map((headerGroup, headerIndex) => (
-            <STr
-              ref={innerHeaderRef}
-              style={{ ...rowStyle, minWidth: tableWidth }}
-              key={headerIndex}
-              {...headerGroup.getHeaderGroupProps()}
-            >
-              {headerGroup.headers.map((column, columnIndex) => {
-                const id = `header-${columnIndex}`;
-
-                return (
-                  <STh
-                    {...column.getHeaderProps(column.getSortByToggleProps())}
-                    onClick={() => onHeaderClick && onHeaderClick(column)}
-                    key={columnIndex}
-                    id={id}
-                    style={{ ...column.style }}
-                  >
-                    {column.render("Header")}
-                    {column.defaultCanSort !== false && column.isSorted ? (
-                      column.isSortedDesc == "DESC" ? (
-                        <IconAngleDown />
-                      ) : (
-                        <IconAngleUp />
-                      )
-                    ) : null}
-                  </STh>
-                );
-              })}
-            </STr>
-          ))} */}
         </SThead>
         <STbody>
           {loading ? (