react-table#TableSortByToggleProps TypeScript Examples

The following examples show how to use react-table#TableSortByToggleProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FeTableTHead.tsx    From frontegg-react with MIT License 5 votes vote down vote up 
FeTableTHead: FC<FeTableTHeadProps<any>> = <T extends object>(props: FeTableTHeadProps<T>) => {
  const {
    prefixCls,
    headerGroups,
    onSortChange,
    onFilterChange,
    toggleAllRowsSelected,
    selectedFlatRows,
    isAllRowsSelected,
  } = props;
  return (
    <div className='fe-table__thead'>
      {headerGroups.map((headerGroup) => (
        <div className='fe-table__thead-tr' {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((c, index) => {
            const column = c as FeTableColumnProps<T>;
            if (column.id === 'fe-selection') {
              return (
                <div
                  className={classNames('fe-table__thead-tr-th', {
                    'fe-table__thead-tr-th__first-cell': index === 0,
                  })}
                  {...column.getHeaderProps()}
                >
                  <FeCheckbox
                    indeterminate={!isAllRowsSelected && (selectedFlatRows ?? []).length > 0}
                    checked={isAllRowsSelected}
                    onChange={() => toggleAllRowsSelected?.(!isAllRowsSelected)}
                  />
                </div>
              );
            }
            const withExpander = headerGroup.headers[0].id === 'fe-expander';
            const minWidth = headerGroup.headers[0].minWidth || 0;
            const ownWidth = column.width || 0;
            const width = index === 1 && withExpander ? { width: Number(ownWidth) + minWidth } : {};

            const { style, ...headerProps } = {
              ...column.getHeaderProps(
                column.getSortByToggleProps((p: Partial<TableSortByToggleProps>) => ({
                  ...p,
                  onClick: column.canSort ? () => onSortChange?.(column) : undefined,
                }))
              ),
            };

            return (
              <div
                className={classNames('fe-table__thead-tr-th', {
                  'fe-table__thead-tr-th__first-cell': index === 0,
                  'fe-table__thead-tr-th__first-cell__expander': index === 0 && withExpander,
                  'fe-table__thead-sortable-asc': column.isSorted && !column.isSortedDesc,
                  'fe-table__thead-sortable-desc': column.isSorted && column.isSortedDesc,
                })}
                {...headerProps}
                style={{ ...style, ...width }}
              >
                {column.render('Header')}
                <FeTableSortColumn column={column} />

                <div className='fe-table__spacer' />
                {column.canFilter && (
                  <FeTableFilterColumn prefixCls={prefixCls} column={column} onFilterChange={onFilterChange} />
                )}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}
Example #2
Source File: TableHead.tsx    From frontegg-react with MIT License 5 votes vote down vote up 
TableHead: FC<FeTableTHeadProps<any>> = <T extends object>(props: FeTableTHeadProps<T>) => {
  const {
    headerGroups,
    onSortChange,
    onFilterChange,
    toggleAllRowsSelected,
    selectedFlatRows,
    isAllRowsSelected,
  } = props;
  const classes = useStyles();

  return (
    <MaterialTableHead className={classes.head}>
      {headerGroups.map((headerGroup) => (
        <TableRow {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((c, index) => {
            const column = c as FeTableColumnProps<T>;
            if (column.id === 'fe-selection') {
              return (
                <TableCell {...column.getHeaderProps()}>
                  <Checkbox
                    className={classes.checkBox}
                    indeterminate={!isAllRowsSelected && (selectedFlatRows ?? []).length > 0}
                    checked={isAllRowsSelected}
                    onChange={() => toggleAllRowsSelected?.(!isAllRowsSelected)}
                  />
                </TableCell>
              );
            }
            const withExpander = headerGroup.headers[0].id === 'fe-expander';
            const tableCellProps = column.getHeaderProps(
              column.getSortByToggleProps((p: Partial<TableSortByToggleProps>) => ({
                ...p,
                onClick: column.canSort ? () => onSortChange?.(column) : undefined,
              }))
            );
            const minWidth = headerGroup.headers[0].minWidth || 0;
            const ownWidth = column.width || 0;
            const width = index === 1 && withExpander ? { width: Number(ownWidth) + minWidth, paddingLeft: 32 } : {};
            const cellStyle = { ...tableCellProps?.style, ...width };
            tableCellProps.className = classNames(tableCellProps.className, {
              [classes.firstHeadCell]: index === 0,
              [classes.expander]: index === 0 && withExpander,
            });
            return (
              <TableCell padding='default' {...tableCellProps} style={cellStyle}>
                <Box display='flex' alignItems='center' justifyContent='space-between' flexWrap='nowrap'>
                  <Box display='flex' flexGrow='1'>
                    {column.canSort ? (
                      <TableSortLabel
                        className='fe-sortLabel'
                        active={column.isSorted}
                        direction={column.isSortedDesc ? 'desc' : 'asc'}
                      >
                        {column.render('Header')}
                      </TableSortLabel>
                    ) : (
                      <>{column.render('Header')}</>
                    )}
                  </Box>
                  {column.canFilter && <TableFilterColumn column={column} onFilterChange={onFilterChange} />}
                </Box>
              </TableCell>
            );
          })}
        </TableRow>
      ))}
    </MaterialTableHead>
  );
}
Example #3
Source File: TableHead.tsx    From opensaas with MIT License 5 votes vote down vote up 
TableHead: React.FC<TableTHeadProps<any>> = <T extends object>(props: TableTHeadProps<T>) => {
  const {
    headerGroups,
    onSortChange,
    onFilterChange,
    toggleAllRowsSelected,
    selectedFlatRows,
    isAllRowsSelected,
  } = props;
  const classes = useStyles();

  return (
    <MaterialUITableHead className={classes.head}>
      {headerGroups.map((headerGroup) => (
        <TableRow {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((c) => {
            const column = c as TableColumnProps<T>;
            if (column.id === 'selection') {
              return (
                <TableCell {...column.getHeaderProps()}>
                  <Checkbox
                    className={classes.checkBox}
                    indeterminate={!isAllRowsSelected && (selectedFlatRows ?? []).length > 0}
                    checked={isAllRowsSelected}
                    onChange={() => toggleAllRowsSelected?.(!isAllRowsSelected)}
                  />
                </TableCell>
              );
            }
            return (
              <TableCell
                padding='default'
                {...column.getHeaderProps(
                  column.getSortByToggleProps((p: Partial<TableSortByToggleProps>) => ({
                    ...p,
                    onClick: column.canSort ? () => onSortChange?.(column) : undefined,
                  })),
                )}>
                <Box display='flex' alignItems='center' justifyContent='space-between' flexWrap='nowrap'>
                  <Box display='flex' flexGrow='1'>
                    {column.canSort ? (
                      <TableSortLabel
                        className='sort-label'
                        active={column.isSorted}
                        direction={column.isSortedDesc ? 'desc' : 'asc'}>
                        {column.render('Header')}
                      </TableSortLabel>
                    ) : (
                      <>{column.render('Header')}</>
                    )}
                  </Box>
                  {column.canFilter && <TableFilterColumn column={column} onFilterChange={onFilterChange} />}
                </Box>
              </TableCell>
            );
          })}
        </TableRow>
      ))}
    </MaterialUITableHead>
  );
}