Table Toolbar

A flexible toolbar that sits above a data table. Left slot for search and filters, right slot for action buttons.

import { TableToolbar } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add table-toolbar

Import

import.tsx

import { TableToolbar } from "@aetherstack/patterns"

Usage

table-toolbar.tsx

import { TableToolbar } from "@aetherstack/patterns"
import { Button, Input } from "@aetherstack/ui"
import { Search, SlidersHorizontal, Download } from "lucide-react"

<TableToolbar
  search={
    <div className="relative w-64">
      <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
      <Input className="pl-9" placeholder="Search members…" />
    </div>
  }
  filters={
    <Button variant="outline" size="sm">
      <SlidersHorizontal />
      Filters
    </Button>
  }
  actions={
    <Button variant="outline" size="sm">
      <Download />
      Export
    </Button>
  }
/>

Props

Prop	Type	Default	Description
search	ReactNode	—	Left slot — typically a search Input with a leading icon.
filters	ReactNode	—	Middle slot — filter dropdowns, date pickers, etc.
actions	ReactNode	—	Right slot — action buttons (Export, Invite, etc.).
className	string	—	Additional classes on the toolbar wrapper.

* Required