Repository: h2oai/wave
File: ui/src/table.tsx (TypeScript)

Code before:
              : +c.max_width
            : undefined
        return {
          key: c.name,
          name: c.label,
          fieldName: c.name,
          minWidth,
          maxWidth,
          headerClassName: c.sortable ? css.sortableHeader : undefined,
          iconClassName: c.sortable ? css.sortingIcon : undefined,
          iconName: c.sortable ? 'SortDown' : undefined,
          onColumnClick,
          columnActionsMode: c.filterable ? Fluent.ColumnActionsMode.hasDropdown : Fluent.ColumnActionsMode.clickable,
          cellType: c.cell_type,
          isSortable: c.sortable,
          isResizable: true,
        }
      })),
      primaryColumnKey = m.columns.find(c => c.link)?.name || (m.columns[0].link === false ? undefined : m.columns[0].name),
      selection = new Fluent.Selection({
        onSelectionChanged: () => {
          qd.args[m.name] = selection.getSelection().map(item => (item as any).__key__)
        }
      }),
      init = () => {
        if (m.multiple && m.values) {
          m.values.forEach(v => selection.setKeySelected(v, true, false))
          qd.args[m.name] = m.values
        }
      },
      onItemInvoked = (item: any) => {
        qd.args[m.name] = [item.__key__]
        qd.sync()
      },
      onRenderItemColumn = (item?: any, _index?: number, col?: QColumn) => {
        if (!item || !col) return <span />

        const v = item[col.fieldName as S]
        if (col.key === primaryColumnKey && !m.multiple) {
          const onClick = () => {
            qd.args[m.name] = [item.__key__]
            qd.sync()
          }
          return <Fluent.Link onClick={onClick}>{v}</Fluent.Link>
        }

        if (col.cellType?.progress) return <XProgressTableCellType model={col.cellType.progress} progress={item[col.key]} />
        else if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />

        return <span>{v}</span>
      },

Review comment (suggestion):
We should make this behavior consistent with `ui.dropdown()` - allow multiple selection if `values` is set.

Code after:
            ? c.max_width.endsWith('px')
              ? +c.max_width.substring(0, c.max_width.length - 2)
              : +c.max_width
            : undefined
        return {
          key: c.name,
          name: c.label,
          fieldName: c.name,
          minWidth,
          maxWidth,
          headerClassName: c.sortable ? css.sortableHeader : undefined,
          iconClassName: c.sortable ? css.sortingIcon : undefined,
          iconName: c.sortable ? 'SortDown' : undefined,
          onColumnClick,
          columnActionsMode: c.filterable ? Fluent.ColumnActionsMode.hasDropdown : Fluent.ColumnActionsMode.clickable,
          cellType: c.cell_type,
          isSortable: c.sortable,
          isResizable: true,
        }
      })),
      primaryColumnKey = m.columns.find(c => c.link)?.name || (m.columns[0].link === false ? undefined : m.columns[0].name),
      selection = new Fluent.Selection({
        onSelectionChanged: () => {
          qd.args[m.name] = selection.getSelection().map(item => item.key as S)
        }
      }),
      init = () => {
        if (isMultiple && m.values) {
          m.values.forEach(v => selection.setKeySelected(v, true, false))
          qd.args[m.name] = m.values
        }
      },
      onItemInvoked = (item: Fluent.IObjectWithKey & Dict<any>) => {
        qd.args[m.name] = [item.key as S]
        qd.sync()
      },
      onRenderItemColumn = (item?: Fluent.IObjectWithKey & Dict<any>, _index?: number, col?: QColumn) => {
        if (!item || !col) return <span />

        const v = item[col.fieldName as S]
        if (col.key === primaryColumnKey && !isMultiple) {
          const onClick = () => {
            qd.args[m.name] = [item.key as S]
            qd.sync()
          }
          return <Fluent.Link onClick={onClick}>{v}</Fluent.Link>
        }

        if (col.cellType?.progress) return <XProgressTableCellType model={col.cellType.progress} progress={item[col.key]} />
        else if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />