Commands for Table Rows

[mtanco]

Is your feature request related to a problem? Please describe

When showing data in table, often there may be more than one action that could happen for each individual row. Today developers can create a button for each action and then the user would click the row and then click the button to get that specific action.

Describe the solution you'd like

The ability to have a ... as the last column in a table which shows a dropdown list of commands or actions when selected. From my perspective this makes sense as a command option for each ui.row but perhaps there are better ways to implement it.

Additional context

https://xd.adobe.com/view/57fcfe84-8e3a-4c64-ada0-f113ec8edb1a-02af/

[mturoci]

Proposed API:

/** Defines cell content to be rendered instead of a simple text. */
interface TableCellType {
  /** Renders a progress arc with a percentage value in the middle. */
  progress?: ProgressTableCellType
  /** Renders an icon. */
  icon?: IconTableCellType
  /** Renders a command menu. */
  command?: CommandTableCellType
}

/**
 * Create a cell type that renders command menu.
 *
 * Commands are typically displayed as context menu items. Useful when you need to provide
 * multiple actions within a single row.
 */
export interface CommandTableCellType {
  /** Items to render. */
  items: Command[]
 /** An identifying name for this component. */
  name?: S
}

@lo5 the biggest challenge here IMO is to come up with a sensible pattern on how to configure the values to be submitted - what values should q.args.command-name contain.

We can either:

• Submit a row index - easy, but not sure if usable in real world scenarios.
• Submit a serialized table row.
• Use comma delimited string within table row cell (similar to table badges) and assume the order and number of entries matches command items.
• Ask devs to provide a stringified map of key value pairs where key would have to match the command name and value would be a string that user wants to have submitted.

[lo5]

what values should q.args.command-name contain.

Table rows have names. If the user clicks on a command named foo on a row named bar, I would expect q.args.foo='bar'.

Question: what's the use of CommandCellType.name?

[mturoci]

Table rows have names. If the user clicks on a command named foo on a row named bar, I would expect q.args.foo='bar'

Got it.

Question: what's the use of CommandCellType.name?

Used for just data-test attr within TableCellType in general (icon / progress etc.) to be easily selectable when e2e testing if needed.