@dxos/react-ui-table 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

package/src/model/table-presentation.ts

@@ -68,7 +68,8 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
           }
 
           switch (props.format) {
-            case FormatEnum.Boolean: {
+            case FormatEnum.Boolean:
+            case FormatEnum.SingleSelect: {
               return '';
             }
             case FormatEnum.Ref: {
@@ -119,6 +120,17 @@ export class TablePresentation<T extends BaseTableRow = { id: string }> {
         cell.readonly = true;
       }
 
+      if (props.format === FormatEnum.SingleSelect) {
+        const value = getValue(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options) {
+          const option = options.find((o) => o.id === value);
+          if (option) {
+            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+          }
+        }
+      }
+
       const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
       cells[idx] = cell;
     };

package/src/model/table-sorting.ts

@@ -188,6 +188,20 @@ export class TableSorting<T extends BaseTableRow> {
       return value;
     }
 
+    /**
+     * For single select fields, the sort value is determined by the index of the option in the
+     * options array. This ensures sort order matches the configured option order.
+     */
+    if (format === FormatEnum.SingleSelect) {
+      const options = props.options;
+      if (!options) {
+        return undefined;
+      }
+
+      const option = options.find((option) => option.id === value);
+      return option ? options.indexOf(option) : undefined;
+    }
+
     // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
     //   Right now we're going to be sorting based on the raw values.
     //   Maybe we need to recurse this function with the referenced prop format and field?

package/src/util/table-buttons.ts

@@ -39,7 +39,7 @@ const createButton = ({
     .join(' ');
 
   const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
-  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {

package/src/util/table-controls.ts

@@ -23,8 +23,8 @@ export const CONTROL_IDENTIFIERS = {
 } as const;
 
 const BASE_CLASSES = {
-  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox',
-  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch',
+  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox',
+  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch',
 } as const;
 
 const renderAttributes = (data: Record<string, string>) => {