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

Code before:
 *
 * If `multiple` is set to True, each row in the table is selectable. A row can be selected by clicking on it.
 * Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,
 * `q.args.table_name` is set to `[row1_name, row2_name, ...]` where `table_name` is the `name` of the table,
 * and `row1_name`, `row2_name` are the `name` of the rows that were selected. Note that if `multiple` is
 * set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger
 * submission.
 */
export interface Table {
  /** An identifying name for this component. */
  name: S
  /** The columns in this table. */
  columns: TableColumn[]
  /** The rows in this table. */
  rows: TableRow[]
  /** True to allow multiple rows to be selected. */
  multiple?: B
  /** True to allow group by feature. */
  groupable?: B
  /** Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False. */
  downloadable?: B
  /** Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False. */
  resettable?: B
  /** The height of the table, e.g. '400px', '50%', etc. */
  height?: S
  /** The names of the initially selected rows. Multiple must be set to true in order to make this prop work. */
  values?: S[]
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

type QColumn = Fluent.IColumn & {
  cellType?: TableCellType
  isSortable?: B
}

const
  css = stylesheet({
    sortableHeader: {
      $nest: {
        '.ms-DetailsHeader-cellName': {
          display: 'flex',
          flexDirection: 'row-reverse',
        }
      }
    },
    sortingIcon: {
      marginLeft: 10,
      fontSize: rem(1.1)
    },
    // HACK: incorrect width recalculated after changing to "group by mode" - collapse icon in header

Review comment (suggestion):
```suggestion
  /** The names of the selected rows. If this parameter is set, multiple selections will be allowed (`multiple` is assumed to be `True`). */
```

Code after:
 *
 * If `multiple` is set to True, each row in the table is selectable. A row can be selected by clicking on it.
 * Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,
 * `q.args.table_name` is set to `[row1_name, row2_name, ...]` where `table_name` is the `name` of the table,
 * and `row1_name`, `row2_name` are the `name` of the rows that were selected. Note that if `multiple` is
 * set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger
 * submission.
 */
export interface Table {
  /** An identifying name for this component. */
  name: S
  /** The columns in this table. */
  columns: TableColumn[]
  /** The rows in this table. */
  rows: TableRow[]
  /** True to allow multiple rows to be selected. */
  multiple?: B
  /** True to allow group by feature. */
  groupable?: B
  /** Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False. */
  downloadable?: B
  /** Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False. */
  resettable?: B
  /** The height of the table, e.g. '400px', '50%', etc. */
  height?: S
  /** The names of the selected rows. If this parameter is set, multiple selections will be allowed (`multiple` is assumed to be `True`). */
  values?: S[]
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

type QColumn = Fluent.IColumn & {
  cellType?: TableCellType
  isSortable?: B
}

const
  css = stylesheet({
    sortableHeader: {
      $nest: {
        '.ms-DetailsHeader-cellName': {
          display: 'flex',
          flexDirection: 'row-reverse',
        }
      }
    },
    sortingIcon: {
      marginLeft: 10,
      fontSize: rem(1.1)
    },
    // HACK: incorrect width recalculated after changing to "group by mode" - collapse icon in header