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

Code before:
  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
}

type WaveColumn = Fluent.IColumn & {
  dataType?: S
  cellType?: TableCellType
  isSortable?: B
}

type DataTable = {
  model: Table
  onFilterChange: (filterKey: S, filterVal: S, checked?: boolean) => void
  sort: (col: WaveColumn) => void,
  reset: () => void
  filteredItems: any[]
  selectedFilters: Dict<S[]> | null
  items: any[]
  selection: Fluent.Selection
  isMultiple: B
  isSearchable: B
  groups?: Fluent.IGroup[]
  setFiltersInBulk: (colKey: S, filters: S[]) => void
}

type ContextualMenuState = {
  onFilterChange: (filterKey: S, filterVal: S, checked?: boolean) => void
  col: WaveColumn
  listProps: Fluent.IContextualMenuListProps
  selectedFiltersRef: React.MutableRefObject<Dict<S[]> | null>
  setFiltersInBulk: (colKey: S, filters: S[]) => void
}

const
  MIN_ROWS_TO_DISPLAY_FOOTER = 20,
  // TODO: Clean up into correct Fluent style slots.
  css = stylesheet({
    // HACK: Put sorting icon on right (same as filter).

Review comment (suggestion):
nit
```suggestion
  onFilterChange: (filterKey: S, filterVal: S, checked?: B) => void
```

Code after:
  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
}

type WaveColumn = Fluent.IColumn & {
  dataType?: S
  cellType?: TableCellType
  isSortable?: B
}

type DataTable = {
  model: Table
  onFilterChange: (filterKey: S, filterVal: S, checked?: B) => void
  sort: (col: WaveColumn) => void,
  reset: () => void
  filteredItems: any[]
  selectedFilters: Dict<S[]> | null
  items: any[]
  selection: Fluent.Selection
  isMultiple: B
  isSearchable: B
  groups?: Fluent.IGroup[]
  setFiltersInBulk: (colKey: S, filters: S[]) => void
}

type ContextualMenuProps = {
  onFilterChange: (filterKey: S, filterVal: S, checked?: B) => void
  col: WaveColumn
  listProps: Fluent.IContextualMenuListProps
  selectedFiltersRef: React.MutableRefObject<Dict<S[]> | null>
  setFiltersInBulk: (colKey: S, filters: S[]) => void
}

const
  MIN_ROWS_TO_DISPLAY_FOOTER = 20,
  // TODO: Clean up into correct Fluent style slots.
  css = stylesheet({
    // HACK: Put sorting icon on right (same as filter).