diff --git a/src/examples/basic/table.ts b/src/examples/basic/table.ts index 5b2e30b..418ee04 100644 --- a/src/examples/basic/table.ts +++ b/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', { diff --git a/src/ioSchema.ts b/src/ioSchema.ts index 1e0454f..4e08725 100644 --- a/src/ioSchema.ts +++ b/src/ioSchema.ts @@ -175,6 +175,19 @@ export const richSelectOption = z export type RichSelectOption = z.infer +export const highlightColor = z.enum([ + 'red', + 'orange', + 'yellow', + 'green', + 'blue', + 'purple', + 'pink', + 'gray', +]) + +export type HighlightColor = z.infer + // 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(), }), ]) diff --git a/src/types.ts b/src/types.ts index 86bb617..abec530 100644 --- a/src/types.ts +++ b/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 + highlightColor?: HighlightColor } | TableCellValue