Skip to content

Commit

Permalink
Merge pull request #3715 from grommet/fix/3711-simple-toolbar
Browse files Browse the repository at this point in the history
update how to guide for toolbar
  • Loading branch information
taysea authored Feb 12, 2024
2 parents b4c9e43 + 3ca724d commit e5eb9a1
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 2 deletions.
Binary file modified aries-site/public/learnImages/data-simple-filters.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ import { Box, Data, DataTable, Grommet, Pagination, Text } from "grommet";

### Toolbar

Add `toolbar` as a boolean property on Data to display a search input, filter button, and results summary above the DataTable.
Setting `toolbar` to 'true' will include a Toolbar containing DataSearch, a results summary above the DataTable, and DataFilters with layer prop.

Grommet offers a [Toolbar component](https://v2.grommet.io/toolbar) for users who may want to configure their own toolbar.

```
<Data data={data} toolbar>
Expand Down Expand Up @@ -170,7 +172,7 @@ Add the following to Data:
</Data>
```

Now, when the filters menu is opened, the filters will look like this:
Now, when the filters layer is opened, the filters will look like this:

<Box
width="medium"
Expand Down

0 comments on commit e5eb9a1

Please sign in to comment.