ActionList

Interface of ActionList
🏗 Coming Soon

The <ActionList> component, like <Table>, displays tabular data. However, unlike a <Table>, an <ActionList> allows you to bake in a set of actions on each row. Common use cases include:

  • A list of users with user details and a "Delete This User" action
  • A list of groups and their associated permissions with an "Edit This Group's Permissions" action on each row
  • A list of recently run queries and a "Rerun This Query" action on each row

The <ActionList> component acts as the main wrapper to other <ActionList>-related components. It must receive an array of type ActionListColumns in its columns prop. That array should contain objects that describe the columns in your <ActionList>.

ID
Name
1
Gorgonzola
2
Cheddar
3
Blue

ActionListItem

Interface of ActionListItem
🏗 Coming Soon

The <ActionListItem> component represents a row of data in your Action List.

To define actions on a row, pass in <ActionListItemAction> elements (wrapped in a React.Fragment if there are multiple) into the actions prop.

You can also pass a callback to the onClick prop, but note that this callback will not fire when clicking on the Vertical Dots <IconButton />.

The actionsTooltip prop can be used to set the tooltip text of a row's actions button. This prop will also be used in a visually hidden label on the actions button, which is especially useful for getting the actions button DOM element when testing.

ActionListItemColumn

Interface of ActionListItemColumn
🏗 Coming Soon

The <ActionListItemColumn> component is equivalent to a data cell in your Action List. <ActionListItemColumn> elements should always be children of an <ActionListItem> element (i.e. each row should contain some number of column elements).

In its simplest form, an <ActionListItemColumn> element will display whatever child elements it has.

You can also create more advanced layouts within your <ActionListItemColumn> by utilizing the optional detail and indicator props.

Passing in a React element into the detail prop will display said element underneath any child elements of your <ActionListItemColumn>.

Passing in a React element into the indicator prop will display said element left of any child elements (and any element passed into the detail prop).

Name
Cheddar

Wikipedia

Note: By default, clicking on any element within an <ActionListItemColumn> will trigger the onClick of the parent <ActionListItem>. To prevent this, make sure to include an event.stopPropagation() call within your <ActionListItemColumn>'s onClick.

ActionListItemAction

Interface of ActionListItemAction
🏗 Coming Soon

The <ActionListItemAction> component represents an actionable item on the rows of your Action List. As noted above, you can supply each of your rows with actions by passing <ActionListItemAction> elements into the actions prop of the parent <ActionListItem> element.

ActionListManager

Interface of ActionListManager
🏗 Coming Soon

In the event that your page and <ActionList> render before data is available (i.e. before a Promise resolves), you can use an <ActionListManager> component to conditionally render a loading icon until your data is ready.

Passing "false" into an <ActionListManager>'s isLoading prop will render a <Spinner> icon. Once you pass in "true" into the isLoading prop, the <ActionListManager> will render its children instead.

Additionally, you can render a "No Results" message using the noResults prop. When noResults is "true", the <ActionListManager> will display a "No Results" message in place of its children.

To customize the "No Results" message text, use the noResultsText prop.

Sorting

You can implement sorting on an <ActionList> by passing a function into the optional onSort prop.

Clicking on the column header will lead to an onSort call, with (1) the column's id and (2) the next sort direction, passed in as arguments. The sort direction argument will either be a string 'desc' if the current sort direction of the column is 'asc', or 'asc' in all other cases.

Note: Only columns whose corresponding column objects have canSort: true will be sortable. In addition, if your data is initially sorted on a specific column, you may want to default the corresponding column object with a sortDirection property.

The function passed into onSort, generally speaking, should perform these actions for proper sorting behavior:

  • Update the corresponding column object's sortDirection
  • Sort the collection representing your data

If you want default sorting behavior, you can use the doDefaultActionListSort helper function. The doDefaultActionListSort helper function will return a sorted data array as well as an updated columns array, which can then be used to replace your existing arrays post-sort.

ID
Name
1
Gorgonzola
2
Cheddar
3
Blue

Selecting rows

You can add row select behavior on an <ActionList/> by passing in the canSelect, onSelect and itemsSelected props.

An <ActionList/> with the canSelect prop passed in will display <Checkbox/>s on each of its rows.

Clicking on a <Checkbox/> will trigger the onSelect callback prop, with the id of the clicked <ActionListItem/> passed in as an argument.

The itemsSelected prop should be given the id's of all selected <ActionListItem>s.

Note: The id of an <ActionListItem>s must be a string, the itemSelected prop should be an array of strings.

If you would like a row's onClick to toggle a row's selected state, rather than have a custom-defined onClick, you can do so by passing in the onClickRowSelect prop into the <ActionList/>.

ID
Name
1
Gorgonzola
2
Cheddar
3
Blue

Selecting all rows

A header checkbox is included next to your <ActionList/>'s header when the canSelect prop is true.

Clicking on this header checkbox will trigger the callback passed into the <ActionList/>'s onSelectAll prop.

If you would like to remove the header checkbox, but retain the row checkboxes, pass in { all: false } into your canSelect prop.

For accessibility purposes, the header checkbox is described by the ID of the header row. To set the ID of the header row, use the headerRowId prop on ActionList.

ID
Name
1
Gorgonzola
2
Cheddar
3
Blue

ID
Name
1
Gorgonzola
2
Cheddar
3
Blue