Support column formatter for table widget (#904)

CartoDB · Sep 19, 2024 · 809535b · 809535b
1 parent d0dcb9e
commit 809535b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,8 @@
 - Fix HistogramWidget with one non-zero bucket [#901](https://github.com/CartoDB/carto-react/pull/901)
 - Spatial Index Sources use remote widgets calculation [#898](https://github.com/CartoDB/carto-react/pull/898)
 - Support for `hiddenColumnFields` parameter and `onRowClick` handler for Table Widget [#900](https://github.com/CartoDB/carto-react/pull/900)
-- Support for `searchText` and `searchColumn` for Table Widget [#900](https://github.com/CartoDB/carto-react/pull/902)
+- Support for `searchText` and `searchColumn` for Table Widget [#902](https://github.com/CartoDB/carto-react/pull/902)
+- Support for columns `formatter` function for Table Widget [#904](https://github.com/CartoDB/carto-react/pull/904)
 
 ## 3.0.0
 

diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js
@@ -194,11 +194,13 @@ function TableBodyComponent({ columns, rows, onRowClick }) {
             hover={!!onRowClick}
             onClick={() => onRowClick && onRowClick(row)}
           >
-            {columns.map(({ field, headerName, align, component }) => {
+            {columns.map(({ field, headerName, align, component, formatter }) => {
               let cellValue = Object.entries(row).find(([key]) => {
                 return key.toUpperCase() === field.toUpperCase();
               })?.[1];
-              if (typeof cellValue === 'bigint') {
+              if (formatter) {
+                cellValue = formatter(cellValue);
+              } else if (typeof cellValue === 'bigint') {
                 cellValue = cellValue.toString(); // otherwise TableCell will fail for displaying it
               } else if (Array.isArray(cellValue)) {
                 cellValue = `[${cellValue

diff --git a/packages/react-widgets/src/widgets/TableWidget.js b/packages/react-widgets/src/widgets/TableWidget.js
@@ -8,7 +8,7 @@ import { _FeatureFlags, _hasFeatureFlag } from '@carto/react-core';
 
 /**
  * Renders a <TableWidget /> component
- * @typedef {{field: string, headerName?: string, align?: string, type?: string}} Column
+ * @typedef {{field: string, headerName?: string, align?: string, type?: string, formatter?: Function}} Column
  * @param  {object} props
  * @param  {string} props.id - ID for the widget instance.
  * @param  {string} props.title - Title to show in the widget header.