Control Layout

Control Layout enables users to curate data by performing actions, searching, filtering, and manipulating display results for Table, DataCardList, and DataGrid. This component is built into DataView.

A pointing to the search input within the control layout; B pointing to the select all rows checkbox within the control layout; C pointing to the actions dropdown within the control layout; D pointing to the search input within the control layout; E pointing to the search input within the control layout; F pointing to the search input within the control layout; G pointing to the search input within the control layout; H pointing to the search input within the control layout; I pointing to the search input within the control layout; J pointing to the search input within the control layout; K pointing to the search input within the control layout; L pointing to the search input within the control layout; M pointing to the search input within the control layout; N pointing to the search input within the control layout; O pointing to the search input within the control layout; P pointing to the search input within the control layout; Q pointing to the search input within the control layout; R pointing to the search input within the control layout; S pointing to the search input within the control layout; T pointing to the search input within the control layout; U pointing to the search input within the control layout; V pointing to the search input within the control layout; W pointing to the search input within the control layout; X pointing to the search input within the control layout; Y pointing to the search input within the control layout; Z pointing to the search input within the control layout; D pointing to the filter button within the control layout; E pointing to the columns button with the control layout — Control Layout and its sub-components

Anatomy of the Control Layout pattern
Item	Name	Description
A	`<Autocomplete />`or`<TextField />`	Both`<Autocomplete />` and `<TextField />` allows users to search for results within the dataset Use `<Autocomplete />` when displaying a `<Menu />` with suggestions Use `<TextField />` when the API can not support displaying a `<Menu />` with suggestions
B	`<Checkbox />`	The `<Checkbox />` gives users the option to select all items displayed within a dataset
C	`<Button />`	The `<Button />` gives users the option to perform an action on the selected items within a dataset
D	`<Button />`	The `<Button />` gives users the option to filter results within a dataset
E	`<Button />`	The `<Button />` gives users the option to manipulate display options with the `<DataView />`

Select all (27)

Select row	Name	Department	Job Title	Email address
Select row Liana Varo	Liana Varo	Marketing	Contractor	Email address
Select row Henry Cote	Henry Cote	Human Resources	Engineer	Email address
Select row Maria Stephens	Maria Stephens	Marketing	Chief Editor	Email address
Select row Mark Brouwer	Mark Brouwer	Accounting and Finance	People Operations	Email address
Select row Tatiana Robu	Tatiana Robu	R&D	Designer	Email address
Select row Ruby Nguyen	Ruby Nguyen	Sales	Sr. Engineer	Email address
Select row Sergio Guevara	Sergio Guevara	Sales	Account Manager	Email address
Select row Rafe Walker	Rafe Walker	Accounting and Finance	Information Security Specialist	Email address
Select row Fabian Lupea	Fabian Lupea	Legal	Office Operations	Email address
Select row Sienna Brown	Sienna Brown	Operations	CTO	Email address
Select row Zoe Mordin	Zoe Mordin	Marketing	Recruiter	Email address
Select row Vinay Katwal	Vinay Katwal	Purchasing	Account Director	Email address
Select row Charlie King	Charlie King	IT	Project Manager	Email address
Select row Maria Mancini	Maria Mancini	Marketing	Client Support Manager	Email address
Select row Dorothy Bishop	Dorothy Bishop	IT	Marketing Director	Email address
Select row Victor Dubois	Victor Dubois	Sales	Recruiter	Email address
Select row Phillip Carroll	Phillip Carroll	Sales	Client Support Director	Email address
Select row Willie Morrison	Willie Morrison	Security	Level 1 Tech Suport	Email address
Select row Liam Jones	Liam Jones	Employee	Associate Creative Director	Email address
Select row Felix Roth	Felix Roth	Human Resources	Contractor	Email address
Select row Noah Anderson	Noah Anderson	Accounting and Finance	Engineer	Email address
Select row Sienna Smith	Sienna Smith	Operations	Sr. Designer	Email address
Select row Craig Ellis	Craig Ellis	Legal	Office Administrator	Email address
Select row Rosa Amador	Rosa Amador	Sales	Client Support Manager	Email address
Select row Alexis Muller	Alexis Muller	IT	IT Specialist	Email address
Select row Jasmine Jacob	Jasmine Jacob	Human Resources	IT Ops Lead	Email address
Select row Emily Lee	Emily Lee	Legal	CEO	Email address

import React from 'react'

import {
  Box,
  Button,
  Checkbox,
  CheckboxGroup,
  ControlLayout,
  DataGrid,
  DataGridBody,
  DataGridDataCell,
  DataGridHeader,
  DataGridHeaderCell,
  DataGridRow,
  DataGridSelectRowDataCell,
  DataGridSelectRowHeaderCell,
  Dialog,
  DialogActions,
  DialogBody,
  DialogFooter,
  DialogHeader,
  Link,
  Menu,
  MenuItem,
  Pagination,
  PaginationNavigation,
  PaginationNavigationButton,
  PaginationPerPageSelectField,
  TextField,
  useDialog,
  useMenu,
} from '@gusto/workbench'
import { CaretDown, Filter, Search } from '@gusto/workbench-icons'

import { employees } from './_employees'

export const Basic = () => {
  // default "columns" checkbox set on page load
  const defaultColumnsOptions = [
    'name',
    'department',
    'jobTitle',
    'emailAddress',
  ]

  // default filters and their selection on page load
  const defaultFilterNames = {
    Department: [],
    Title: [],
  }

  // Menu props for the actionsMenu and filterColumnsMenu in `sm` breakpoint
  const [actionsMenuProps, actionsMenuButtonProps] = useMenu()

  // filter and "columns" Dialog 'open' state
  const [filtersDialogProps, filtersDialogButtonProps] = useDialog()
  const [columnsDialogProps, columnsDialogButtonProps] = useDialog()

  const [rowSelected, setRowSelected] = React.useState<{
    [key: number]: boolean
  }>({})

  // used to keep track of the onChange of the "columns" checkboxes in columnsDialog
  const [columnsCheckboxChecked, setColumnsCheckboxChecked] = React.useState<
    string[]
  >(defaultColumnsOptions)

  // used to make changes to the table on "Apply" of the filters dialog
  const [columnsDisplayed, setColumnsDisplayed] = React.useState<string[]>(
    defaultColumnsOptions,
  )

  // used to keep track of the onChange of the filter checkboxes
  const [filterCheckboxChecked, setFilterCheckboxChecked] = React.useState<{
    [key: string]: string[]
  }>(defaultFilterNames)

  // used to make changes to the table on "Apply" of the filters dialog
  const [appliedFilterCheckboxes, setAppliedFilterCheckboxes] = React.useState<{
    [key: string]: string[]
  }>(defaultFilterNames)

  // used to determine filter count, if filters are applied, and filters data
  const filterCount =
    appliedFilterCheckboxes.Department.length +
    appliedFilterCheckboxes.Title.length

  const isDataFiltered =
    appliedFilterCheckboxes.Department.length > 0 ||
    appliedFilterCheckboxes.Title.length > 0

  const filteredEmployees = isDataFiltered
    ? employees.filter(employee => {
        return (
          appliedFilterCheckboxes.Department.includes(employee.Department) ||
          appliedFilterCheckboxes.Title.includes(employee.Title)
        )
      })
    : employees

  // used to determine if the "select all" checkbox is checked, indeterminate, or unchecked
  const rowSelectedCount = Object.values(rowSelected).filter(val => val).length
  const selectAllChecked = rowSelectedCount === filteredEmployees.length
  const selectAllIndeterminate = rowSelectedCount > 0 && !selectAllChecked

  // an example of keeping track of rows selected
  const toggleGridRowSelection = (id: number) => {
    setRowSelected(currSelected => ({
      ...currSelected,
      [id]: !rowSelected[id],
    }))
  }

  // an example of creating the "select all" functionality
  const toggleAllRows = () => {
    employees
      .map(employee => employee.Digit)
      .forEach(digit => {
        setRowSelected(currRowsSelected => ({
          ...currRowsSelected,
          [digit]: !selectAllChecked,
        }))
      })
  }

  // an example of keeping a state management of each columns checkbox being checked
  const columnsCheckboxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const checkboxChecked = e.target.checked

    if (checkboxChecked) {
      setColumnsCheckboxChecked(currChecked => [...currChecked, e.target.value])
    } else {
      setColumnsCheckboxChecked(currChecked =>
        currChecked.filter(value => value !== e.target.value),
      )
    }
  }

  // an example of resetting columns options
  const resetColumnsOptions = () => {
    setColumnsCheckboxChecked(defaultColumnsOptions)
  }

  // an example of updating the visibility of columns
  const updateColumnVisibility = () => {
    setColumnsDisplayed(columnsCheckboxChecked)
  }

  // an example of keeping a state management of each filter checkbox being checked
  const filterCheckboxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // getting the group name from CheckboxGroup
    const groupName = e.target.name
    const checkboxChecked = e.target.checked

    if (checkboxChecked) {
      setFilterCheckboxChecked(currChecked => ({
        ...currChecked,
        [groupName]: [...currChecked[groupName], e.target.value],
      }))
    } else {
      setFilterCheckboxChecked(currChecked => ({
        ...currChecked,
        [groupName]: currChecked[groupName].filter(
          value => value !== e.target.value,
        ),
      }))
    }
  }

  // an example of applying filters on "apply" button submit within filters Dialog
  const applyFilters = () => {
    filtersDialogProps.onClose()
    setAppliedFilterCheckboxes(filterCheckboxChecked)
  }

  // an example of resetting filters within the filters Dialog
  const resetFilters = () => {
    setFilterCheckboxChecked(defaultFilterNames)
  }

  return (
    <>
      <ControlLayout
        searchField={
          <TextField
            label="Search"
            before={<Search />}
            placeholder="Search"
            visuallyHideLabel
          />
        }
        selectAllCheckbox={
          <Checkbox
            type="checkbox"
            label={
              rowSelectedCount > 0
                ? `${rowSelectedCount} Selected`
                : `Select all (${filteredEmployees.length})`
            }
            checked={selectAllChecked}
            indeterminate={selectAllIndeterminate}
            onChange={toggleAllRows}
          />
        }
        selectAllActionsMenu={
          selectAllChecked || selectAllIndeterminate ? (
            <>
              <Button
                {...actionsMenuButtonProps}
                after={<CaretDown />}
                size="small"
                variant="primary"
              >
                Actions
              </Button>
              <Menu
                {...actionsMenuProps}
                aria-label="Employee information actions menu"
              >
                <MenuItem>Lorem ipsum</MenuItem>
                <MenuItem>Lorem ipsum</MenuItem>
              </Menu>
            </>
          ) : null
        }
        actions={
          <>
            <Button
              variant="tertiary"
              size="small"
              before={<Filter />}
              {...filtersDialogButtonProps}
            >
              Filter{filterCount > 0 ? ` (${filterCount})` : null}
            </Button>
            <Button
              variant="tertiary"
              size="small"
              {...columnsDialogButtonProps}
            >
              Columns
            </Button>
            <Dialog
              aria-label="Employee information filters"
              {...filtersDialogProps}
            >
              <DialogHeader>Filters</DialogHeader>

              <DialogBody>
                <Box marginBottom={6}>
                  <CheckboxGroup name="Department" legend="Departments">
                    {Array.from(
                      new Set(employees.map(employee => employee.Department)),
                    ).map(department => {
                      return (
                        <Checkbox
                          key={`emp-type-checkbox-${department}`}
                          value={department}
                          label={department}
                          checked={filterCheckboxChecked.Department.includes(
                            department,
                          )}
                          onChange={filterCheckboxOnChange}
                        />
                      )
                    })}
                  </CheckboxGroup>
                </Box>
                <Box marginBottom={6}>
                  <CheckboxGroup name="Title" legend="Job title">
                    {Array.from(
                      new Set(employees.map(employee => employee.Title)),
                    ).map(title => {
                      return (
                        <Checkbox
                          key={`emp-type-checkbox-${title}`}
                          value={title}
                          label={title}
                          checked={filterCheckboxChecked.Title.includes(title)}
                          onChange={filterCheckboxOnChange}
                        />
                      )
                    })}
                  </CheckboxGroup>
                </Box>
              </DialogBody>

              <DialogFooter>
                <DialogActions>
                  <Button variant="primary" onClick={applyFilters}>
                    Apply
                  </Button>
                  <Button onClick={resetFilters}>Clear all filters</Button>
                </DialogActions>
              </DialogFooter>
            </Dialog>
            <Dialog
              aria-label="Employee information visible columns"
              {...columnsDialogProps}
            >
              <DialogHeader>Columns</DialogHeader>

              <DialogBody>
                <CheckboxGroup
                  name="columnsOptions"
                  legend="Column options"
                  visuallyHideLabel
                >
                  <Checkbox
                    value="name"
                    label="Name"
                    checked={columnsCheckboxChecked.includes('name')}
                    onChange={columnsCheckboxOnChange}
                  />
                  <Checkbox
                    value="department"
                    label="Department"
                    checked={columnsCheckboxChecked.includes('department')}
                    onChange={columnsCheckboxOnChange}
                  />
                  <Checkbox
                    value="jobTitle"
                    label="Job title"
                    checked={columnsCheckboxChecked.includes('jobTitle')}
                    onChange={columnsCheckboxOnChange}
                  />
                  <Checkbox
                    value="emailAddress"
                    label="Email address"
                    checked={columnsCheckboxChecked.includes('emailAddress')}
                    onChange={columnsCheckboxOnChange}
                  />
                </CheckboxGroup>
              </DialogBody>

              <DialogFooter>
                <DialogActions>
                  <Button
                    variant="primary"
                    onClick={() => {
                      columnsDialogProps.onClose()
                      updateColumnVisibility()
                    }}
                  >
                    Apply
                  </Button>
                  <Button onClick={resetColumnsOptions}>Reset</Button>
                </DialogActions>
              </DialogFooter>
            </Dialog>
          </>
        }
      />
      <DataGrid
        aria-label="Employee information"
        gridSectionStyles={{ maxHeight: '50rem' }}
      >
        <DataGridHeader>
          <DataGridRow>
            <DataGridSelectRowHeaderCell />
            {columnsDisplayed.includes('name') && (
              <DataGridHeaderCell>Name</DataGridHeaderCell>
            )}
            {columnsDisplayed.includes('department') && (
              <DataGridHeaderCell>Department</DataGridHeaderCell>
            )}
            {columnsDisplayed.includes('jobTitle') && (
              <DataGridHeaderCell>Job Title</DataGridHeaderCell>
            )}
            {columnsDisplayed.includes('emailAddress') && (
              <DataGridHeaderCell>Email address</DataGridHeaderCell>
            )}
          </DataGridRow>
        </DataGridHeader>
        <DataGridBody>
          {filteredEmployees.map(employee => {
            return (
              <DataGridRow
                key={`emp-${employee.Digit}`}
                rowSelected={rowSelected[employee.Digit]}
              >
                <DataGridSelectRowDataCell
                  label={`Select row ${employee['Name-FL']}`}
                  checked={rowSelected[employee.Digit] || false}
                  onChange={() => toggleGridRowSelection(employee.Digit)}
                />
                {columnsDisplayed.includes('name') && (
                  <DataGridHeaderCell scope="row">
                    <Link href="https://gusto.com">{employee['Name-FL']}</Link>
                  </DataGridHeaderCell>
                )}
                {columnsDisplayed.includes('department') && (
                  <DataGridDataCell>{employee.Department}</DataGridDataCell>
                )}
                {columnsDisplayed.includes('jobTitle') && (
                  <DataGridDataCell>{employee.Title}</DataGridDataCell>
                )}
                {columnsDisplayed.includes('emailAddress') && (
                  <DataGridDataCell>
                    <TextField
                      label="Email address"
                      visuallyHideLabel
                      value={employee.Email}
                      readOnly
                    />
                  </DataGridDataCell>
                )}
              </DataGridRow>
            )
          })}
        </DataGridBody>
      </DataGrid>
      <Pagination
        position="sticky"
        aria-label="Employee information table"
        variant="joined"
      >
        <PaginationPerPageSelectField />
        <PaginationNavigation>
          <PaginationNavigationButton variant="first" />
          <PaginationNavigationButton variant="previous" />
          <PaginationNavigationButton variant="next" />
          <PaginationNavigationButton variant="last" />
        </PaginationNavigation>
      </Pagination>
    </>
  )
}

The following props are associated to the ControlLayout layout helper for the Control Layout pattern

React props
Name	Type	Default	Description
searchField	`ReactNode`	-	The search input for the data set; Can be a Autocomplete or TextField
selectAllCheckbox	`ReactNode`	-	The select all checkbox for rows within the data set
selectAllActionsMenu	`ReactNode`	-	The action menu associated to the "select all" rows checkbox
actions	`ReactNode`	-	The actions that are associated with updating the data set such as filtering, visibility, etc.

Show code

Show code