fix: add accessor key to select column when data is undefined [MDS-1321]

.changeset/polite-rice-serve.md

@@ -0,0 +1,5 @@
+---
+"@heathmont/moon-table-v8-tw": patch
+---
+
+fix: add accessor key to select column to avoid crashing when no data is present [MDS-1321]

.vscode/settings.json

@@ -9,5 +9,6 @@
   "prettier.printWidth": 2,
   "eslint.workingDirectories": [
     "./docs"
-  ]
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

packages/table-v8/package.json

@@ -16,11 +16,10 @@
   },
   "dependencies": {
     "@heathmont/moon-core-tw": "^10.17.3",
-    "@tanstack/react-table": "^8.9.11",
+    "@tanstack/react-table": "^8.20.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"

packages/table-v8/src/components/TD.tsx

@@ -8,6 +8,7 @@ import type { Cell } from "../private/types";
 import type ClipProps from "../private/types/ClipProps";
 import type StickyColumn from "../private/types/StickyColumn";
 import type TDProps from "../private/types/TDProps";
+import TDContent from "./TDContent";
 
 const getStickyShift = (
   cells: Cell<{}, unknown>[],
@@ -31,94 +32,72 @@ const getStickyShift = (
   }
 };
 
-const TD = forwardRef<HTMLTableCellElement, TDProps>(
-  (
-    {
-      cell,
-      index,
-      cells,
-      rowSize,
-      noGap,
-      className,
-      isFirstColumn,
-      isLastColumn,
-      columnData,
-      textClip,
-      withBorder,
-    },
-    ref,
-  ) => {
-    const stickyColumn: StickyColumn = cell.column.parent
-      ? cell.column.parent?.columnDef
-      : cell.column.columnDef;
-    const stickySide = stickyColumn.sticky;
+const TD = forwardRef<HTMLTableCellElement, TDProps>((props, ref) => {
+  const {
+    cell,
+    index,
+    cells,
+    rowSize,
+    noGap,
+    className,
+    isFirstColumn,
+    isLastColumn,
+    columnData,
+    textClip,
+    withBorder,
+  } = props;
+  const stickyColumn: StickyColumn = cell.column.parent
+    ? cell.column.parent?.columnDef
+    : cell.column.columnDef;
+  const stickySide = stickyColumn.sticky;
 
-    const styles = new Map([
-      ["width", `${cell.column.getSize()}px`],
-      [
-        "minWidth",
-        // prettier-ignore
-        `${stickySide ? cell.column.columnDef.size : cell.column.columnDef.minSize}px`,
-      ],
-      [
-        "maxWidth",
-        // prettier-ignore
-        `${stickySide ? cell.column.columnDef.size : cell.column.columnDef.maxSize}px`,
-      ],
-    ]);
+  const styles = new Map([
+    ["width", `${cell.column.getSize()}px`],
+    [
+      "minWidth",
+      // prettier-ignore
+      `${stickySide ? cell.column.columnDef.size : cell.column.columnDef.minSize}px`,
+    ],
+    [
+      "maxWidth",
+      // prettier-ignore
+      `${stickySide ? cell.column.columnDef.size : cell.column.columnDef.maxSize}px`,
+    ],
+  ]);
 
-    if (stickySide) {
-      styles.set(
-        stickySide,
-        stickySide === "left"
-          ? // prettier-ignore
-            `${columnData ? columnData?.left : getStickyShift(cells, index, "left")}px`
-          : // prettier-ignore
-            `${columnData ? columnData?.right : getStickyShift(cells, index, "right")}px`,
-      );
-    }
-
-    return (
-      <td
-        key={cell.id}
-        style={Object.fromEntries(styles)}
-        className={mergeClassnames(
-          "relative box-border text-start",
-          getFontSize(rowSize),
-          getPadding(rowSize),
-          isFirstColumn && !noGap && "rounded-s-lg after:rounded-s-lg",
-          isLastColumn && !noGap && "rounded-e-lg after:rounded-e-lg",
-          stickySide && "sticky z-[1] before:-z-[1] after:-z-[1]",
-          stickySide &&
-            "before:absolute before:top-0 before:left-0 before:-right-[1px] before:h-full",
-          stickySide &&
-            "after:absolute after:top-0 after:left-0 after:-right-[1px] after:h-full",
-          className,
-        )}
-        ref={ref}
-      >
-        {
-          <CellBorder
-            withBorder={withBorder}
-            isFirstColumn={isFirstColumn}
-            stickySide={stickySide}
-          />
-        }
-        {textClip ? (
-          <div
-            className={mergeClassnames(
-              textClip === ("clip" as ClipProps) && "break-all truncate",
-              textClip === ("break" as ClipProps) && "break-all text-clip",
-            )}
-          >
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          </div>
-        ) : (
-          flexRender(cell.column.columnDef.cell, cell.getContext())
-        )}
-      </td>
+  if (stickySide) {
+    styles.set(
+      stickySide,
+      stickySide === "left"
+        ? // prettier-ignore
+          `${columnData ? columnData?.left : getStickyShift(cells, index, "left")}px`
+        : // prettier-ignore
+          `${columnData ? columnData?.right : getStickyShift(cells, index, "right")}px`,
     );
-  },
-);
+  }
+
+  return (
+    <td
+      key={cell.id}
+      style={Object.fromEntries(styles)}
+      className={mergeClassnames(
+        "relative box-border text-start",
+        getFontSize(rowSize),
+        getPadding(rowSize),
+        isFirstColumn && !noGap && "rounded-s-lg after:rounded-s-lg",
+        isLastColumn && !noGap && "rounded-e-lg after:rounded-e-lg",
+        stickySide && "sticky z-[1] before:-z-[1] after:-z-[1]",
+        stickySide &&
+          "before:absolute before:top-0 before:left-0 before:-right-[1px] before:h-full",
+        stickySide &&
+          "after:absolute after:top-0 after:left-0 after:-right-[1px] after:h-full",
+        className,
+      )}
+      ref={ref}
+    >
+      <TDContent {...props} stickySide={stickySide} />
+    </td>
+  );
+});
 
 export default TD;

packages/table-v8/src/components/TDContent.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { FC } from "react";
+import TDProps from "../private/types/TDProps";
+import CellBorder from "./CellBorder";
+import TDFlexRender from "./TDFlexRender";
+
+type Props = TDProps & {
+  stickySide?: string;
+};
+
+const TDContent: FC<Props> = (props) => {
+  const { isFirstColumn, stickySide, withBorder } = props;
+
+  return (
+    <>
+      <CellBorder
+        withBorder={withBorder}
+        isFirstColumn={isFirstColumn}
+        stickySide={stickySide}
+      />
+
+      <TDFlexRender {...props} />
+    </>
+  );
+};
+
+export default TDContent;

packages/table-v8/src/components/TDFlexRender.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { mergeClassnames } from "@heathmont/moon-core-tw";
+import type ClipProps from "../private/types/ClipProps";
+import TDProps from "../private/types/TDProps";
+import { flexRender } from "../private/utils";
+
+const TDFlexRender: FC<TDProps> = ({ cell, textClip }) => {
+  if (cell.getValue() === undefined) {
+    return null;
+  }
+
+  const flexRenderedCell = flexRender(
+    cell.column.columnDef.cell,
+    cell.getContext(),
+  );
+
+  if (textClip) {
+    return (
+      <div
+        className={mergeClassnames(
+          textClip === ("clip" as ClipProps) && "break-all truncate",
+          textClip === ("break" as ClipProps) && "break-all text-clip",
+        )}
+      >
+        {flexRenderedCell}
+      </div>
+    );
+  }
+  return flexRenderedCell;
+};
+
+export default TDFlexRender;

packages/table-v8/src/components/Table.tsx

@@ -19,6 +19,7 @@ import Minimap from "./Minimap";
 import type { ColumnResizeMode } from "../private/types";
 import type ColumnData from "../private/types/ColumnData";
 import type TableProps from "../private/types/TableProps";
+import DataHelper from "../private/types/DataHelper";
 
 const Table = ({
   columns,
@@ -60,10 +61,37 @@ const Table = ({
     React.useState<ColumnResizeDirection>('ltr')
 */
 
+  const curatedData: DataHelper[] = isSelectable
+    ? data.map((dataItem) => ({
+        ...dataItem,
+        select: dataItem.select ?? false,
+      }))
+    : data;
+
+  const selectColumnIndex = isSelectable
+    ? columns.findIndex((column) => column.id === "select")
+    : -1;
+
+  const selectColumn =
+    selectColumnIndex > -1
+      ? {
+          ...columns[selectColumnIndex],
+          accessorKey: "select",
+        }
+      : undefined;
+
+  const curatedColumns = selectColumn
+    ? [
+        ...columns.slice(0, selectColumnIndex),
+        { ...selectColumn },
+        ...columns.slice(selectColumnIndex + 1),
+      ]
+    : columns;
+
   const table = useReactTable({
-    columns,
+    columns: curatedColumns,
     columnResizeMode,
-    data,
+    data: curatedData,
     defaultColumn,
     state,
     enableColumnResizing: isResizable,

words.txt

@@ -19,6 +19,7 @@ datetime
 datetimelocal
 dodoria
 Draghandle
+esbenp
 fraunces
 frieza
 frontmatter