@viasat/beam-react 2.57.0 → 2.58.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.58.0 (2026-08-20)
+
+### 🚀 Features
+
+- **DataTable:** column definitions (ColumnMeta + createBeamColumn) ([#1408](https://git.viasat.com/vega/Beam/pull/1408))
+
+### ❤️ Thank You
+
+- Amarandei, Robert-Andrei
+
 ## 2.57.0 (2026-08-20)
 
 ### 🚀 Features

package/lib/wip/DataTable/DataTable.columns.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function a(n){const{align:e,meta:t,...r}=n;return e===void 0?{...r,meta:t}:{...r,meta:{...t,align:e}}}exports.createBeamColumn=a;

package/lib/wip/DataTable/DataTable.columns.d.ts

@@ -0,0 +1,26 @@
+import { ColumnMeta, RowData } from '@tanstack/react-table';
+import { DataTableColumnDef } from './DataTable.types';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Horizontal alignment for the column's header and cell content. */
+        align?: 'left' | 'right';
+    }
+}
+/**
+ * Arguments for {@link createBeamColumn}: a standard {@link DataTableColumnDef}
+ * plus a top-level `align` convenience field.
+ */
+export type CreateBeamColumnArgs<TData extends RowData, TValue = unknown> = DataTableColumnDef<TData, TValue> & {
+    /** Horizontal alignment; folded into `meta.align`. */
+    align?: ColumnMeta<TData, TValue>['align'];
+};
+/**
+ * Folds `align` into `meta.align` instead of introducing a new stored column
+ * type. Pure authoring convenience with no runtime meaning of its own — a
+ * hand-written `meta: { align: 'right' }` renders identically. Merges into an
+ * existing `meta` rather than clobbering it.
+ *
+ * @param column - {@link CreateBeamColumnArgs}.
+ * @returns A plain {@link DataTableColumnDef} with no top-level `align`.
+ */
+export declare function createBeamColumn<TData extends RowData, TValue = unknown>(column: CreateBeamColumnArgs<TData, TValue>): DataTableColumnDef<TData, TValue>;

package/lib/wip/DataTable/DataTable.columns.es.js

@@ -0,0 +1,10 @@
+function a(r) {
+  const { align: e, meta: t, ...n } = r;
+  return e === void 0 ? { ...n, meta: t } : {
+    ...n,
+    meta: { ...t, align: e }
+  };
+}
+export {
+  a as createBeamColumn
+};

package/lib/wip/DataTable/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DataTable.cjs.js"),l=require("./DataTable.Header.cjs.js"),t=require("./DataTable.Toolbar.cjs.js"),b=require("./DataTable.Head.cjs.js"),T=require("./DataTable.ColumnHeader.cjs.js"),D=require("./DataTable.Body.cjs.js"),r=require("./DataTable.Row.cjs.js"),_=require("./DataTable.Cell.cjs.js"),o=require("./DataTable.Footer.cjs.js"),a=require("./DataTable.context.cjs.js"),i=require("./useBeamTable.cjs.js");exports.DataTable=e.DataTable;exports.DataTableHeader=l.DataTableHeader;exports.DataTableToolbar=t.DataTableToolbar;exports.DataTableHead=b.DataTableHead;exports.DataTableColumnHeader=T.DataTableColumnHeader;exports.DataTableBody=D.DataTableBody;exports.DataTableRow=r.DataTableRow;exports.DataTableCell=_.DataTableCell;exports.DataTableFooter=o.DataTableFooter;exports.DataTableProvider=a.DataTableProvider;exports.useDataTable=a.useDataTable;exports.useBeamTable=i.useBeamTable;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DataTable.cjs.js"),l=require("./DataTable.Header.cjs.js"),t=require("./DataTable.Toolbar.cjs.js"),b=require("./DataTable.Head.cjs.js"),T=require("./DataTable.ColumnHeader.cjs.js"),r=require("./DataTable.Body.cjs.js"),_=require("./DataTable.Row.cjs.js"),D=require("./DataTable.Cell.cjs.js"),o=require("./DataTable.Footer.cjs.js"),a=require("./DataTable.context.cjs.js"),i=require("./useBeamTable.cjs.js"),u=require("./DataTable.columns.cjs.js");exports.DataTable=e.DataTable;exports.DataTableHeader=l.DataTableHeader;exports.DataTableToolbar=t.DataTableToolbar;exports.DataTableHead=b.DataTableHead;exports.DataTableColumnHeader=T.DataTableColumnHeader;exports.DataTableBody=r.DataTableBody;exports.DataTableRow=_.DataTableRow;exports.DataTableCell=D.DataTableCell;exports.DataTableFooter=o.DataTableFooter;exports.DataTableProvider=a.DataTableProvider;exports.useDataTable=a.useDataTable;exports.useBeamTable=i.useBeamTable;exports.createBeamColumn=u.createBeamColumn;

package/lib/wip/DataTable/index.d.ts

@@ -9,5 +9,7 @@ export { DataTableCell } from './DataTable.Cell';
 export { DataTableFooter } from './DataTable.Footer';
 export { DataTableProvider, useDataTable } from './DataTable.context';
 export { useBeamTable } from './useBeamTable';
+export { createBeamColumn } from './DataTable.columns';
 export type { DataTableProps, DataTableColumnDef, DataTableHeaderProps, DataTableToolbarProps, DataTableHeadProps, DataTableColumnHeaderProps, DataTableBodyProps, DataTableRowProps, DataTableCellProps, DataTableFooterProps, } from './DataTable.types';
 export type { UseBeamTableArgs } from './useBeamTable';
+export type { CreateBeamColumnArgs } from './DataTable.columns';

package/lib/wip/DataTable/index.es.js

@@ -1,25 +1,27 @@
 import { DataTable as o } from "./DataTable.es.js";
 import { DataTableHeader as t } from "./DataTable.Header.es.js";
-import { DataTableToolbar as b } from "./DataTable.Toolbar.es.js";
+import { DataTableToolbar as m } from "./DataTable.Toolbar.es.js";
 import { DataTableHead as T } from "./DataTable.Head.es.js";
 import { DataTableColumnHeader as p } from "./DataTable.ColumnHeader.es.js";
 import { DataTableBody as D } from "./DataTable.Body.es.js";
 import { DataTableRow as u } from "./DataTable.Row.es.js";
-import { DataTableCell as s } from "./DataTable.Cell.es.js";
-import { DataTableFooter as C } from "./DataTable.Footer.es.js";
-import { DataTableProvider as n, useDataTable as v } from "./DataTable.context.es.js";
-import { useBeamTable as y } from "./useBeamTable.es.js";
+import { DataTableCell as C } from "./DataTable.Cell.es.js";
+import { DataTableFooter as n } from "./DataTable.Footer.es.js";
+import { DataTableProvider as c, useDataTable as i } from "./DataTable.context.es.js";
+import { useBeamTable as w } from "./useBeamTable.es.js";
+import { createBeamColumn as F } from "./DataTable.columns.es.js";
 export {
   o as DataTable,
   D as DataTableBody,
-  s as DataTableCell,
+  C as DataTableCell,
   p as DataTableColumnHeader,
-  C as DataTableFooter,
+  n as DataTableFooter,
   T as DataTableHead,
   t as DataTableHeader,
-  n as DataTableProvider,
+  c as DataTableProvider,
   u as DataTableRow,
-  b as DataTableToolbar,
-  y as useBeamTable,
-  v as useDataTable
+  m as DataTableToolbar,
+  F as createBeamColumn,
+  w as useBeamTable,
+  i as useDataTable
 };

package/lib/wip/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DataTable/DataTable.cjs.js"),l=require("./DataTable/DataTable.Header.cjs.js"),t=require("./DataTable/DataTable.Toolbar.cjs.js"),b=require("./DataTable/DataTable.Head.cjs.js"),r=require("./DataTable/DataTable.ColumnHeader.cjs.js"),T=require("./DataTable/DataTable.Body.cjs.js"),o=require("./DataTable/DataTable.Row.cjs.js"),i=require("./DataTable/DataTable.Cell.cjs.js"),_=require("./DataTable/DataTable.Footer.cjs.js"),a=require("./DataTable/DataTable.context.cjs.js"),D=require("./DataTable/useBeamTable.cjs.js"),u=require("./DateField/DateField.cjs.js"),d=require("./ErrorBoundary/ErrorBoundary.cjs.js");exports.DataTable=e.DataTable;exports.DataTableHeader=l.DataTableHeader;exports.DataTableToolbar=t.DataTableToolbar;exports.DataTableHead=b.DataTableHead;exports.DataTableColumnHeader=r.DataTableColumnHeader;exports.DataTableBody=T.DataTableBody;exports.DataTableRow=o.DataTableRow;exports.DataTableCell=i.DataTableCell;exports.DataTableFooter=_.DataTableFooter;exports.DataTableProvider=a.DataTableProvider;exports.useDataTable=a.useDataTable;exports.useBeamTable=D.useBeamTable;exports.DateField=u.DateField;exports.ErrorBoundary=d.ErrorBoundary;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DataTable/DataTable.cjs.js"),l=require("./DataTable/DataTable.Header.cjs.js"),t=require("./DataTable/DataTable.Toolbar.cjs.js"),b=require("./DataTable/DataTable.Head.cjs.js"),r=require("./DataTable/DataTable.ColumnHeader.cjs.js"),o=require("./DataTable/DataTable.Body.cjs.js"),T=require("./DataTable/DataTable.Row.cjs.js"),_=require("./DataTable/DataTable.Cell.cjs.js"),i=require("./DataTable/DataTable.Footer.cjs.js"),a=require("./DataTable/DataTable.context.cjs.js"),D=require("./DataTable/useBeamTable.cjs.js"),u=require("./DataTable/DataTable.columns.cjs.js"),n=require("./DateField/DateField.cjs.js"),d=require("./ErrorBoundary/ErrorBoundary.cjs.js");exports.DataTable=e.DataTable;exports.DataTableHeader=l.DataTableHeader;exports.DataTableToolbar=t.DataTableToolbar;exports.DataTableHead=b.DataTableHead;exports.DataTableColumnHeader=r.DataTableColumnHeader;exports.DataTableBody=o.DataTableBody;exports.DataTableRow=T.DataTableRow;exports.DataTableCell=_.DataTableCell;exports.DataTableFooter=i.DataTableFooter;exports.DataTableProvider=a.DataTableProvider;exports.useDataTable=a.useDataTable;exports.useBeamTable=D.useBeamTable;exports.createBeamColumn=u.createBeamColumn;exports.DateField=n.DateField;exports.ErrorBoundary=d.ErrorBoundary;

package/lib/wip/index.es.js

@@ -1,29 +1,31 @@
 import { DataTable as o } from "./DataTable/DataTable.es.js";
 import { DataTableHeader as t } from "./DataTable/DataTable.Header.es.js";
 import { DataTableToolbar as m } from "./DataTable/DataTable.Toolbar.es.js";
-import { DataTableHead as f } from "./DataTable/DataTable.Head.es.js";
-import { DataTableColumnHeader as x } from "./DataTable/DataTable.ColumnHeader.es.js";
+import { DataTableHead as p } from "./DataTable/DataTable.Head.es.js";
+import { DataTableColumnHeader as b } from "./DataTable/DataTable.ColumnHeader.es.js";
 import { DataTableBody as D } from "./DataTable/DataTable.Body.es.js";
 import { DataTableRow as u } from "./DataTable/DataTable.Row.es.js";
-import { DataTableCell as H } from "./DataTable/DataTable.Cell.es.js";
-import { DataTableFooter as n } from "./DataTable/DataTable.Footer.es.js";
-import { DataTableProvider as y, useDataTable as C } from "./DataTable/DataTable.context.es.js";
-import { useBeamTable as v } from "./DataTable/useBeamTable.es.js";
-import { DateField as E } from "./DateField/DateField.es.js";
-import { ErrorBoundary as R } from "./ErrorBoundary/ErrorBoundary.es.js";
+import { DataTableCell as n } from "./DataTable/DataTable.Cell.es.js";
+import { DataTableFooter as H } from "./DataTable/DataTable.Footer.es.js";
+import { DataTableProvider as s, useDataTable as y } from "./DataTable/DataTable.context.es.js";
+import { useBeamTable as c } from "./DataTable/useBeamTable.es.js";
+import { createBeamColumn as w } from "./DataTable/DataTable.columns.es.js";
+import { DateField as P } from "./DateField/DateField.es.js";
+import { ErrorBoundary as g } from "./ErrorBoundary/ErrorBoundary.es.js";
 export {
   o as DataTable,
   D as DataTableBody,
-  H as DataTableCell,
-  x as DataTableColumnHeader,
-  n as DataTableFooter,
-  f as DataTableHead,
+  n as DataTableCell,
+  b as DataTableColumnHeader,
+  H as DataTableFooter,
+  p as DataTableHead,
   t as DataTableHeader,
-  y as DataTableProvider,
+  s as DataTableProvider,
   u as DataTableRow,
   m as DataTableToolbar,
-  E as DateField,
-  R as ErrorBoundary,
-  v as useBeamTable,
-  C as useDataTable
+  P as DateField,
+  g as ErrorBoundary,
+  w as createBeamColumn,
+  c as useBeamTable,
+  y as useDataTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.57.0",
+  "version": "2.58.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -60,12 +60,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.57.0",
-    "@viasat/beam-shared": "2.57.0",
-    "@viasat/beam-styles": "2.57.0",
-    "@viasat/beam-tokens": "2.57.0",
-    "@viasat/beam-icons": "2.57.0",
-    "@viasat/beam-react-claude-plugin": "2.57.0",
+    "@viasat/beam-fonts": "2.58.0",
+    "@viasat/beam-shared": "2.58.0",
+    "@viasat/beam-styles": "2.58.0",
+    "@viasat/beam-tokens": "2.58.0",
+    "@viasat/beam-icons": "2.58.0",
+    "@viasat/beam-react-claude-plugin": "2.58.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",