FilterLayout

View Source

Used to display a filterable content area. Use with DataTable.

Filter

HEADER

SIDEBAR

TOOLBAR

TABLE

Copy

Edit

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>}
  />
)

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

Filter

HEADER

SIDEBAR

TOOLBAR

TABLE

Copy

Edit

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>
)

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>
)

Props

sidebarWidthnumber | 'fill'

Size of sidebar in pixels or fill for full width when open.

tableany

Render slot for table.

Condensed
Props

PreviousEditActions NextGroup