Add custom width to Table column's gridWidth

Author: gabro

packages/bento-design-system/src/Table/createTable.tsx

@@ -33,7 +33,7 @@ import {
   sectionHeaderContainer,
   table,
 } from "./Table.css";
-import { Column as ColumnType, Row as RowType } from "./types";
+import { Column as ColumnType, GridWidth, Row as RowType } from "./types";
 import {
   useLayoutEffect,
   useMemo,
@@ -60,6 +60,7 @@ import { ButtonLinkProps } from "../Button/ButtonLink";
 import { IconButtonProps } from "../IconButton/createIconButton";
 import { TableConfig } from "./Config";
 import { IconHelp, IconInfo } from "../Icons";
+import { match, P } from "ts-pattern";
 
 type SortFn<C extends ReadonlyArray<ColumnType<string, {}, any>>> = (
   a: Row<RowType<C>>,
@@ -245,13 +246,13 @@ export function createTable(
       );
     }
 
-    function gridWidthStyle(gridWidth: "fit-content" | "fill-available"): string {
-      switch (gridWidth) {
-        case "fit-content":
-          return "max-content";
-        case "fill-available":
-          return "minmax(max-content, auto)";
-      }
+    function gridWidthStyle(gridWidth: GridWidth): string {
+      return match(gridWidth)
+        .with("fit-content", () => "max-content")
+        .with("fill-available", () => "minmax(max-content, auto")
+        .with({ custom: P.select(P.string) }, (width) => width)
+        .with({ custom: P.select(P.number) }, (width) => `${width}px`)
+        .exhaustive();
     }
 
     const gridTemplateColumns = columns

packages/bento-design-system/src/Table/types.ts

@@ -12,7 +12,7 @@ declare module "react-table" {
   interface ColumnInterface<D extends object> extends UseSortByColumnOptions<D> {
     align?: "left" | "right" | "center";
     sticky?: "left";
-    gridWidth?: "fit-content" | "fill-available";
+    gridWidth?: GridWidth;
     hint?: LocalizedString | { onPress: () => void };
   }
 
@@ -35,3 +35,5 @@ type ColumnValueByAccessor<C, K extends string> = C extends Column<K, infer _D,
 export type Row<Columns extends ReadonlyArray<Column<string, {}, any>>> = {
   [k in Columns[number]["accessor"]]?: ColumnValueByAccessor<Columns[number], k>;
 };
+
+export type GridWidth = "fit-content" | "fill-available" | { custom: string | number };

packages/storybook/stories/Components/Table.stories.tsx

@@ -34,6 +34,11 @@ const exampleColumns = [
     headerLabel: formatMessage("Name"),
     accessor: "name",
   }),
+  tableColumn.text({
+    headerLabel: formatMessage("Extended address"),
+    accessor: "address",
+    width: { custom: 200 },
+  }),
   tableColumn.textWithIcon({
     headerLabel: formatMessage("Country"),
     accessor: "country",
@@ -87,6 +92,7 @@ const deleteAction = {
 const exampleData = [
   {
     name: formatMessage("Amazon"),
+    address: "Theodore Lowe Ap #867-859 Sit Rd. Azusa New York 39531",
     country: {
       icon: IconInformative,
       text: formatMessage("US"),
@@ -110,6 +116,7 @@ const exampleData = [
   },
   {
     name: formatMessage("Google"),
+    address: "Cecilia Chapman 711-2880 Nulla St.  Mankato Mississippi 96522",
     country: {
       icon: IconInformative,
       text: formatMessage("US"),
@@ -133,6 +140,7 @@ const exampleData = [
   },
   {
     name: formatMessage("Microsoft"),
+    address: "Iris Watson P.O. Box 283 8562 Fusce Rd.  Frederick Nebraska 20620",
     country: {
       icon: IconInformative,
       text: formatMessage("US"),
@@ -157,6 +165,7 @@ const exampleData = [
   },
   {
     name: formatMessage("buildo"),
+    address: "Celeste Slater 606-3727 Ullamcorper. Street Roseville NH 11523",
     country: {
       icon: null,
       text: formatMessage("IT"),
@@ -176,6 +185,7 @@ const exampleData = [
   },
   {
     name: formatMessage("Twitter"),
+    address: "Theodore Lowe Ap #867-859 Sit Rd. Azusa New York 39531",
     country: {
       icon: IconInformative,
       text: formatMessage("US"),