---
title: FilterLayout
category: General
summary: Used to display a filterable content area. Use with [DataTable](/datatable).
---

```jsx live
render(
  <FilterLayout
    sidebarWidth={224}
    header={<Box padding={2}>HEADER</Box>}
    sidebar={<Box padding={2}>SIDEBAR</Box>}
    toolbar={<Box padding={2}>TOOLBAR</Box>}
    table={<Box padding={2}>TABLE</Box>}
  />
)
```

## Condensed

```jsx live
render(
  <StackView width={40}>
    <FilterLayout
      sidebarWidth="fill"
      header={<Box padding={2}>HEADER</Box>}
      sidebar={<Box padding={2}>SIDEBAR</Box>}
      toolbar={<Box padding={2}>TOOLBAR</Box>}
      table={<Box padding={2}>TABLE</Box>}
    />
  </StackView>
)
```