Merge pull request #1198 from interval/table-cell-bgcolor

Support highlight colors on table cells

Author: jacobmischka

src/examples/basic/table.ts

@@ -1,5 +1,5 @@
 import { IntervalActionDefinition } from '@interval/sdk/src/types'
-import { IntervalActionHandler, Page, Layout, io } from '../..'
+import { IntervalActionHandler, Action, Page, Layout, io } from '../..'
 import { faker } from '@faker-js/faker'
 import fakeUsers from '../utils/fakeUsers'
 import { generateRows } from '../utils/helpers'
@@ -65,6 +65,7 @@ export const display_table: IntervalActionHandler = async io => {
             url: row.image,
             size: 'small',
           },
+          backgroundColor: 'rgba(0, 60, 255, 0.3)',
         }),
       },
       {
@@ -116,6 +117,88 @@ export const display_table: IntervalActionHandler = async io => {
   })
 }
 
+export const highlighted_rows = new Action(async () => {
+  const data = generateRows(50)
+
+  const backgroundColor = await io.input.text('Background color', {
+    helpText: 'CSS string value',
+    defaultValue: 'rgba(0, 60, 255, 0.3)',
+  })
+
+  await io.select.table('Select users', {
+    data,
+    defaultPageSize: 50,
+    columns: [
+      {
+        label: 'User',
+        renderCell: row => ({
+          label: row.name,
+          image: {
+            alt: 'Alt tag',
+            url: row.image,
+            size: 'small',
+          },
+          backgroundColor: row.boolean ? backgroundColor : undefined,
+        }),
+      },
+      {
+        label: 'Email',
+        renderCell: row => ({
+          url: `mailto:${row.email}`,
+          label: row.email,
+          backgroundColor: row.boolean ? backgroundColor : undefined,
+        }),
+      },
+      {
+        label: 'Description',
+        accessorKey: 'description',
+        renderCell: row => ({
+          label: row.description,
+          backgroundColor: row.boolean ? backgroundColor : undefined,
+        }),
+      },
+      {
+        label: 'Date',
+        accessorKey: 'date',
+        renderCell: row => ({
+          label: row.date,
+          backgroundColor: row.boolean ? backgroundColor : undefined,
+        }),
+      },
+    ],
+    rowMenuItems: row => [
+      {
+        label: 'Edit',
+        route: 'edit_user',
+        params: { email: row.email },
+      },
+      {
+        label: 'Edit',
+        route: 'edit_user',
+        params: { email: row.email },
+        disabled: true,
+      },
+      {
+        label: 'Delete',
+        route: 'delete_user',
+        params: { email: row.email },
+        theme: 'danger',
+      },
+      {
+        label: 'Delete',
+        route: 'delete_user',
+        params: { email: row.email },
+        theme: 'danger',
+        disabled: true,
+      },
+      {
+        label: 'External',
+        url: 'https://google.com',
+      },
+    ],
+  })
+})
+
 export const multiple_tables: IntervalActionHandler = async io => {
   await io.group([
     io.display.table('Display users', {

src/ioSchema.ts

@@ -175,6 +175,19 @@ export const richSelectOption = z
 
 export type RichSelectOption = z.infer<typeof richSelectOption>
 
+export const highlightColor = z.enum([
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple',
+  'pink',
+  'gray',
+])
+
+export type HighlightColor = z.infer<typeof highlightColor>
+
 // non-primitive display types such as links, images, etc.
 export const advancedPrimitive = z.object({
   label: z.string().optional(),
@@ -211,6 +224,7 @@ export const tableRowValue = z.union([
     action: z.string().optional(),
     route: z.string().optional(),
     params: serializableRecord.optional(),
+    backgroundColor: highlightColor.optional(),
   }),
 ])
 

src/types.ts

@@ -19,6 +19,7 @@ import type {
   SerializableRecord,
   LegacyLinkProps,
   T_IO_MULTIPLEABLE_METHOD_NAMES,
+  HighlightColor,
 } from './ioSchema'
 import type {
   AccessControlDefinition,
@@ -518,10 +519,10 @@ export type TableColumnResult =
       } & ({ url: string } | { buffer: Buffer })
       url?: string
       route?: string
-      // Deprecated in favor of `route`
-      // TODO: Add TS deprecation soon
+      /** @deprecated Please use `route` instead. */
       action?: string
       params?: z.infer<typeof serializableRecord>
+      highlightColor?: HighlightColor
     }
   | TableCellValue