ComponentsTable Toolbar

Table Toolbar

A beautiful reactive grid toolbar that smoothly morphs filters into bulk action trays or bottom floating consoles upon selecting records.

React

Reactive Morphs

Interactive Demo

Select checkboxes inside the registry list to watch inline morphs and floating docks transition live!

Toolbar Presentation Settings

Switch variants to compare Inline Morphing vs. Bottom Floating Dock systems.

selected

Name	Role	Municipality	Status
Nehry Dedoro	Lead Architect	Angono	active
Reyna Garcia	Database Manager	Taytay	active
Mark Alvarez	System Administrator	Binangonan	pending
Clara Bautista	Support Officer	Angono	active

Showing 4 of 4 entrieschecked_ids: [none]

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/table-toolbar.json

Complete Toolbar Layout

Declare filters, standard operations, and bulk actions. The container handles transitions based on active counts automatically.

import { useState } from "react"
import { TableToolbar, ToolbarAction } from "@/components/micto/table-toolbar"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Trash2, Archive, Settings2 } from "lucide-react"

export default function Page() {
  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")

  const activeFiltersCount = statusFilter !== "all" ? 1 : 0

  return (
    <TableToolbar
      selectedCount={selectedIds.length}
      onClearSelection={() => setSelectedIds([])}
      variant="inline" // or "floating"
      search={
        <Input 
          placeholder="Search records..." 
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="h-8 max-w-xs" 
        />
      }
      filters={
        <div className="flex flex-col gap-2">
          <span className="text-[10px] font-medium text-muted-foreground uppercase">
            Filter by Status
          </span>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="h-8 text-xs">
              <SelectValue placeholder="All Statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="active">Active</SelectItem>
              <SelectItem value="inactive">Inactive</SelectItem>
            </SelectContent>
          </Select>
        </div>
      }
      activeFiltersCount={activeFiltersCount}
      actions={
        <ToolbarAction icon={Plus} variant="default">Add Record</ToolbarAction>
      }
      bulkActions={
        <>
          <ToolbarAction icon={Archive}>Bulk Archive</ToolbarAction>
          <ToolbarAction icon={Trash2} variant="destructive">Bulk Delete</ToolbarAction>
        </>
      }
    />
  )
}

Responsive Toolbar Actions

Use the specialized <ToolbarAction /> component to inherit standard themes, declare icons, and enable automated responsive text collapsing.

// Automates height padding, font constraints, active transitions,
// and features automatic mobile auto-collapse out-of-the-box!

import { ToolbarAction } from "@/components/micto/table-toolbar"
import { Plus } from "lucide-react"

export default function Example() {
  return (
    <ToolbarAction 
      icon={Plus} 
      variant="default"
      collapseOnMobile={true} // hides text on mobile, displaying full on desktop
    >
      Add Citizen
    </ToolbarAction>
  )
}

TableToolbar API Reference

Configure the toolbar layout using the following options.

Prop	Type	Default	Description
selectedCount	number	0	The total number of currently selected/checked items. When greater than zero, transitions into bulk actions view.
onClearSelection	() => void	undefined	Callback fired when clicking the deselect trigger (X icon) inside selection trays.
variant	'inline' \| 'floating'	'inline'	Layout style theme. 'inline' morphs filters in place; 'floating' slides a glossy panel up at viewport bottom.
children	ReactNode	undefined	Filters row items (fallback/legacy) visible on selectedCount = 0.
search	ReactNode	undefined	Standard search input node, displayed on the left side of the toolbar.
filters	ReactNode	undefined	Content of filters, displayed inside a collapsible Popover with a Filters button.
activeFiltersCount	number	0	Number of active filters, displayed as a badge next to the Filters trigger button.
actions	ReactNode	undefined	Standard action triggers (Add buttons, Export settings) visible on selectedCount = 0.
bulkActions	ReactNode	undefined	Multi-item batch action components visible on selectedCount > 0.

ToolbarAction API Reference

Configure actions inside buttons using the following properties.

Prop	Type	Default	Description
variant	'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'	'outline'	Inherits standard button variant parameters.
icon	LucideIcon	undefined	Optional leading vector Lucide icon to embed inside the trigger.
collapseOnMobile	boolean	true	Automatically collapses and hides text labels on mobile screens to preserve layout, rendering as compact icon-only buttons.

PreviousTabbed View NextInertia Pagination