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

Code before:
  /** True to allow group by feature. Not applicable when `pagination` is set. */
  groupable?: B
  /** Indicates whether the table rows can be downloaded 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 width of the table, e.g. '100px'. Defaults to '100%'. */
  width?: 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[]
  /** Controls visibility of table rows when `multiple` is set to `True`. Defaults to 'on-hover'. */
  checkbox_visibility?: 'always' | 'on-hover' | 'hidden'
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** Creates collapsible / expandable groups of data rows. Mutually exclusive with `rows` attr. */
  groups?: TableGroup[]
  /** Display a pagination control at the bottom of the table. Set this value using `ui.table_pagination()`. */
  pagination?: TablePagination
  /** The events to capture on this table. One of 'search' | 'sort' | 'filter' | 'download' | 'page_change' | 'reset' | 'select'. */
  events?: S[]
  /** True to allow only on row to be selected at time. Mutually exclusive with `multiple` attr. */
  isSingle?: B
  /** The name of the selected row. If this parameter is set, single selection will be allowed (`isSingle` is assumed to be `True`). */
  value?: S
}

type WaveColumn = Fluent.IColumn & {
  dataType?: 'string' | 'number' | 'time'
  cellType?: TableCellType
  isSortable?: B
  cellOverflow?: 'tooltip' | 'wrap'
  filters?: S[]
  align?: 'left' | 'center' | 'right'
}

type DataTable = {
  model: Table
  onFilterChange: (filterKey: S, filterVal: S, checked?: B) => void
  sort: (col: WaveColumn, sortAsc: B) => void,
  filteredItems: any[]
  selectedFilters: Dict<S[]> | null
  items: any[]
  selection: Fluent.Selection
  isMultiple: B,
  isSingle: B,
  groups?: Fluent.IGroup[]
  expandedRefs: React.MutableRefObject<{ [key: S]: B } | null>

Review comment (suggestion):
The public API should be snake-cased. However, let's use `single` instead of `is_single` for this case to be consistent with `multiple`.

Code after:
  /** True to allow group by feature. Not applicable when `pagination` is set. */
  groupable?: B
  /** Indicates whether the table rows can be downloaded 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 width of the table, e.g. '100px'. Defaults to '100%'. */
  width?: 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[]
  /** Controls visibility of table rows when `multiple` is set to `True`. Defaults to 'on-hover'. */
  checkbox_visibility?: 'always' | 'on-hover' | 'hidden'
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** Creates collapsible / expandable groups of data rows. Mutually exclusive with `rows` attr. */
  groups?: TableGroup[]
  /** Display a pagination control at the bottom of the table. Set this value using `ui.table_pagination()`. */
  pagination?: TablePagination
  /** The events to capture on this table. One of 'search' | 'sort' | 'filter' | 'download' | 'page_change' | 'reset' | 'select'. */
  events?: S[]
  /** True to allow only on row to be selected at time. Mutually exclusive with `multiple` attr. */
  single?: B
  /** The name of the selected row. If this parameter is set, single selection will be allowed (`single` is assumed to be `True`). */
  value?: S
}

type WaveColumn = Fluent.IColumn & {
  dataType?: 'string' | 'number' | 'time'
  cellType?: TableCellType
  isSortable?: B
  cellOverflow?: 'tooltip' | 'wrap'
  filters?: S[]
  align?: 'left' | 'center' | 'right'
}

type DataTable = {
  model: Table
  onFilterChange: (filterKey: S, filterVal: S, checked?: B) => void
  sort: (col: WaveColumn, sortAsc: B) => void,
  filteredItems: any[]
  selectedFilters: Dict<S[]> | null
  items: any[]
  selection: Fluent.Selection
  isMultiple: B,
  isSingle: B,
  groups?: Fluent.IGroup[]
  expandedRefs: React.MutableRefObject<{ [key: S]: B } | null>