@simoncomputing/mui-bueno-v2 0.14.10 → 0.15.0

package/CHANGELOG.md

@@ -11,6 +11,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Minor increment --> singlular/minor changes. Minimal breaking changes.
 - Patch increment --> singlular/minor changes. Zero breaking changes.
 
+## [0.15.0] - 2025-07-10
+
+### Changed
+
+- `Table`/`PaginatedTable`: Improved type-safety of `TableConfig` & `TableColumn`.
+    - Migration:
+        - You may need to explicitly define your `Table`'s type (ex. `<Table<User> ...>` instead of `<Table ...>`). The same goes for `TableConfig` if you initialize it separately.
+        - You may need to update your generic props of `TableColumn` if you initialize it separately (ex. `TableColumn<User, 'isActive'>` instead of `TableColumn<User, boolean>`)
+
 ## [0.14.10] - 2025-07-03
 
 ### Fixed

package/dist/@types/index.d.ts

@@ -103,7 +103,7 @@ export type EnvironmentInfo = {
 /**
  * TableColumn represents a column in a table where `K` represents a property of `T`
  * EXAMPLE: For a table of users, this would be the `TableColumn` defintion for the
- *          phone number column:  TableColumn<User, Phone>.
+ *          phone number column:  TableColumn<User, 'phoneNumber'>.
  *
  * @property {string} label - Label that will display in the Table header for the column
  * @property {string} fieldName - Property name of the object
@@ -114,20 +114,25 @@ export type EnvironmentInfo = {
  *      on a phone vs tablet/desktop
  * @property {string} sortName - (Optional) Passed instead of `fieldName` to onSortChange(fieldName, ...). Useful if you're rendering the same object in 2+ columns and need a way to differentiate when sorting.
  */
-export type TableColumn<T, K> = {
+export type TableColumn<T, K extends keyof T> = {
     key?: string;
     label?: string;
-    fieldName: string;
-    render?: (value: K, object: T, isMobile: boolean) => React.ReactNode; // used to customize how the data `obj` is displayed in the table
+    fieldName: K;
+    render?: (value: T[K], object: T, isMobile: boolean) => React.ReactNode;
     sortName?: string;
 };
 
 // Sort order for Tables
 export type SortOrder = 'asc' | 'desc';
 
-export type TableConfig<T> = {
-    [K in keyof T]: TableColumn<T, T[K]>; // columns is an array of TableColumns, where the type of each TableColumn matches one of the properties of T (ex. `User`)
-}[keyof T][];
+/**
+ * Defines array of of TableColumns, where the type of each TableColumn matches one of the properties of T (ex. `User`)
+ */
+export type TableConfig<T> = Array<
+    {
+        [K in keyof T]: TableColumnWithKey<T, K>;
+    }[keyof T]
+>;
 
 /**
  * Convenience Interface for autocomplete dropdown options

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@simoncomputing/mui-bueno-v2",
     "private": false,
-    "version": "0.14.10",
+    "version": "0.15.0",
     "type": "module",
     "main": "./dist/index.umd.js",
     "module": "./dist/index.es.js",