@dmsi/wedgekit-react 0.0.413 → 0.0.415

package/dist/components/index.js

@@ -1,31 +1,34 @@
 import {
   DataGrid,
   MobileDataGrid
-} from "../chunk-OBY5EH47.js";
-import "../chunk-M7INAUAJ.js";
+} from "../chunk-BK7SPR6Y.js";
 import "../chunk-6I5LZ2ZC.js";
+import "../chunk-M7INAUAJ.js";
 import "../chunk-44TDIHUP.js";
 import {
   ProductImagePreview
-} from "../chunk-LZGYABCX.js";
+} from "../chunk-ZHZIIVJN.js";
+import "../chunk-2IKT6IHB.js";
 import "../chunk-G5DEC7H3.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
 import "../chunk-MBZ55T2D.js";
-import "../chunk-2IKT6IHB.js";
 import "../chunk-AA6GE3TH.js";
 import "../chunk-KZZKQLKF.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-M6TSTDNZ.js";
+import "../chunk-EWGHVZL5.js";
 import {
   Tooltip
 } from "../chunk-QQ5G773N.js";
 import "../chunk-AT4AWD6B.js";
-import "../chunk-EWGHVZL5.js";
 import {
   Select
 } from "../chunk-J5V2JRIK.js";
+import {
+  SimpleTable
+} from "../chunk-7ULLUUVJ.js";
 import "../chunk-D6YCMQPO.js";
 import "../chunk-4RJKB7LC.js";
 import "../chunk-XM7IQHBU.js";
@@ -111,6 +114,7 @@ export {
   ProductImagePreview,
   Search,
   Select,
+  SimpleTable,
   Subheader,
   Tooltip
 };

package/dist/index.css

@@ -819,6 +819,9 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-2\/3 {
+    width: calc(2/3 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -939,6 +942,9 @@
   .grow-0 {
     flex-grow: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .translate-x-0 {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2013,6 +2019,9 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-sans {
     font-family: var(--font-sans);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.413",
+  "version": "0.0.415",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/SimpleTable.tsx

@@ -0,0 +1,77 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { ReactNode } from "react";
+import { Subheader } from "./Subheader";
+import clsx from "clsx";
+import { Stack } from "./Stack";
+
+type SimpleTableProps<T> = {
+  columns: ColumnDef<T>[];
+  data: T[];
+  /** Optional additional rows appended after the main data (e.g. totals) */
+  additionalRows?: T[] | null;
+};
+
+export function SimpleTable<T extends Record<string, unknown>>({
+  columns,
+  data,
+  additionalRows,
+}: SimpleTableProps<T>) {
+  const allRows =
+    additionalRows && additionalRows.length > 0
+      ? [...data, ...additionalRows]
+      : data;
+
+  return (
+    <Stack elevation={4} rounded overflowX="hidden" overflowY="hidden">
+      <table className="w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal">
+        <thead>
+          <tr className="bg-background-primary-normal divide-x divide-border-primary-normal">
+            {columns.map((column, index) => (
+              <th
+                key={index}
+                scope="col"
+                className={clsx(
+                  "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
+                  column.meta?.headerWidth ? column.meta.headerWidth : "w-2/3",
+                )}
+              >
+                <Subheader>{column.header?.toString()}</Subheader>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {allRows.map((row, rowIndex) => (
+            <tr
+              key={rowIndex}
+              className="border-t border-border-primary-normal divide-x divide-border-primary-normal"
+            >
+              {columns.map((column, colIndex) => {
+                const rawValue = column.id
+                  ? (row as Record<string, unknown>)[column.id]
+                  : null;
+                const cellValue: ReactNode = (rawValue as ReactNode) ?? null;
+                return (
+                  <td
+                    key={colIndex}
+                    className={clsx(
+                      "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
+                      column.meta?.headerWidth,
+                    )}
+                  >
+                    {cellValue !== null && cellValue !== undefined
+                      ? typeof cellValue === "string" ||
+                        typeof cellValue === "number"
+                        ? cellValue.toString()
+                        : cellValue
+                      : ""}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Stack>
+  );
+}

package/src/components/index.ts

@@ -23,3 +23,4 @@ export { Card } from "./Card";
 export { MobileDataGrid } from "./MobileDataGrid";
 export { ProductImagePreview } from "./ProductImagePreview";
 export { CompactImagesPreview } from "./CompactImagesPreview";
+export { SimpleTable } from "./SimpleTable";

package/dist/{chunk-OBY5EH47.js → chunk-BK7SPR6Y.js}

@@ -1,21 +1,21 @@
-import {
-  GridContextProvider
-} from "./chunk-M7INAUAJ.js";
 import {
   RowDetailModalProvider
 } from "./chunk-6I5LZ2ZC.js";
+import {
+  GridContextProvider
+} from "./chunk-M7INAUAJ.js";
 import {
   ColumnList
 } from "./chunk-AA6GE3TH.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";
-import {
-  Tooltip
-} from "./chunk-QQ5G773N.js";
 import {
   Theme
 } from "./chunk-EWGHVZL5.js";
+import {
+  Tooltip
+} from "./chunk-QQ5G773N.js";
 import {
   Select
 } from "./chunk-J5V2JRIK.js";

package/dist/{chunk-LZGYABCX.js → chunk-ZHZIIVJN.js}

@@ -1,3 +1,6 @@
+import {
+  MobileImageCarousel
+} from "./chunk-2IKT6IHB.js";
 import {
   ProductPrimaryImage
 } from "./chunk-G5DEC7H3.js";
@@ -10,9 +13,6 @@ import {
 import {
   CarouselPagination
 } from "./chunk-MBZ55T2D.js";
-import {
-  MobileImageCarousel
-} from "./chunk-2IKT6IHB.js";
 import {
   Grid
 } from "./chunk-ER6RCOH3.js";