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

Code before:
    )
  }

export const
  XTable = ({ model: m }: { model: Table }) => {
    const
      groupable = m.groupable && (!m.groups || m.pagination),
      getItem = React.useCallback((r: TableRow) => {
        const item: Fluent.IObjectWithKey & Dict<any> = { key: r.name }
        for (let i = 0, n = r.cells.length; i < n; i++) {
          const col = m.columns[i]
          item[col.name] = r.cells[i]
        }
        return item
      }, [m.columns]),
      items = React.useMemo(() =>
        m.groups
          ? m.groups.reduce((acc, { rows, label, collapsed = true }) => {
            acc.push(...rows.map(r => ({ ...getItem(r), group: label, collapsed })))
            return acc
          }, [] as (Fluent.IObjectWithKey & { group?: S, collapsed?: B })[])
          : (m.rows || []).map(getItem)
        , [m.rows, m.groups, getItem]),
      isMultiple = Boolean(m.values?.length || m.multiple),
      isSingle = Boolean(m.value || m.single),
      isFullHeight = Boolean(m.height === '1'),
      [filteredItems, setFilteredItems] = React.useState(items),
      [currentPage, setCurrentPage] = React.useState(1),
      searchableKeys = React.useMemo(() => m.columns.filter(({ searchable }) => searchable).map(({ name }) => name), [m.columns]),
      [searchStr, setSearchStr] = React.useState(''),
      [selectedFilters, setSelectedFilters] = React.useState<Dict<S[]> | null>(null),
      [groups, setGroups] = React.useState<Fluent.IGroup[] | undefined>(),
      expandedRefs = React.useRef<{ [key: S]: B } | null>({}),
      [groupByKey, setGroupByKey] = React.useState('*'),
      contentRef = React.useRef<Fluent.IScrollablePane | null>(null),
      tableRef = React.useRef<{ resetSortIcons: () => void } | null>(null),
      groupByOptions: Fluent.IDropdownOption[] = React.useMemo(() =>
        groupable ? [{ key: '*', text: '(No Grouping)' }, ...m.columns.map(col => ({ key: col.name, text: col.label }))] : [], [m.columns, groupable]
      ),
      filter = React.useCallback((selectedFilters: Dict<S[]> | null) => {
        // If we have filters, check if any of the data-item's props (filter's keys) equals to any of its filter values.
        setFilteredItems(
          selectedFilters
            ? items.filter(item => Object.keys(selectedFilters)
              .every(filterKey => !selectedFilters[filterKey].length || selectedFilters[filterKey].some(filterVal => String(item[filterKey]).includes(filterVal)))
            )
            : items
        )
      }, [items]),
      getIsCollapsed = (key: S, expandedRefs: { [key: S]: B } | null) => {
        if (expandedRefs === null) return false

Review comment (suggestion):
Unnecessary cast.

```suggestion
      isFullHeight = m.height === '1',
```

Code after:
    )
  }

export const
  XTable = ({ model: m }: { model: Table }) => {
    const
      groupable = m.groupable && (!m.groups || m.pagination),
      getItem = React.useCallback((r: TableRow) => {
        const item: Fluent.IObjectWithKey & Dict<any> = { key: r.name }
        for (let i = 0, n = r.cells.length; i < n; i++) {
          const col = m.columns[i]
          item[col.name] = r.cells[i]
        }
        return item
      }, [m.columns]),
      items = React.useMemo(() =>
        m.groups
          ? m.groups.reduce((acc, { rows, label, collapsed = true }) => {
            acc.push(...rows.map(r => ({ ...getItem(r), group: label, collapsed })))
            return acc
          }, [] as (Fluent.IObjectWithKey & { group?: S, collapsed?: B })[])
          : (m.rows || []).map(getItem)
        , [m.rows, m.groups, getItem]),
      isMultiple = Boolean(m.values?.length || m.multiple),
      isSingle = Boolean(m.value || m.single),
      isFullHeight = m.height === '1',
      [filteredItems, setFilteredItems] = React.useState(items),
      [currentPage, setCurrentPage] = React.useState(1),
      searchableKeys = React.useMemo(() => m.columns.filter(({ searchable }) => searchable).map(({ name }) => name), [m.columns]),
      [searchStr, setSearchStr] = React.useState(''),
      [selectedFilters, setSelectedFilters] = React.useState<Dict<S[]> | null>(null),
      [groups, setGroups] = React.useState<Fluent.IGroup[] | undefined>(),
      expandedRefs = React.useRef<{ [key: S]: B } | null>({}),
      [groupByKey, setGroupByKey] = React.useState('*'),
      contentRef = React.useRef<Fluent.IScrollablePane | null>(null),
      tableRef = React.useRef<{ resetSortIcons: () => void } | null>(null),
      groupByOptions: Fluent.IDropdownOption[] = React.useMemo(() =>
        groupable ? [{ key: '*', text: '(No Grouping)' }, ...m.columns.map(col => ({ key: col.name, text: col.label }))] : [], [m.columns, groupable]
      ),
      filter = React.useCallback((selectedFilters: Dict<S[]> | null) => {
        // If we have filters, check if any of the data-item's props (filter's keys) equals to any of its filter values.
        setFilteredItems(
          selectedFilters
            ? items.filter(item => Object.keys(selectedFilters)
              .every(filterKey => !selectedFilters[filterKey].length || selectedFilters[filterKey].some(filterVal => String(item[filterKey]).includes(filterVal)))
            )
            : items
        )
      }, [items]),
      getIsCollapsed = (key: S, expandedRefs: { [key: S]: B } | null) => {
        if (expandedRefs === null) return false