An interactive demonstration of toolbars and data grid customizations. Explore layouts for searching, filtering, action menus, and retro tables.
Table Controls & Data Grid Laboratory
Compare toolbar actions, filter sidebars, header controls, command buttons, and classic enterprise Telerik-styled grids.
18 items
ID | Name | Status | Date | Amount |
|---|---|---|---|---|
ITM-001 | Network Switch Upgrade | Active | 2026-03-15 | $4,250.00 |
ITM-002 | Office Lease Renewal | Pending | 2026-03-20 | $12,800.00 |
ITM-003 | Server Maintenance Contract | Active | 2026-02-28 | $3,600.00 |
ITM-004 | Employee Training Program | Active | 2026-03-10 | $1,500.00 |
ITM-005 | Legacy System Decommission | Archived | 2025-12-01 | $0.00 |
ITM-006 | Cloud Migration Phase 2 | Active | 2026-04-01 | $22,000.00 |
ITM-007 | Security Audit Q1 | Inactive | 2026-01-15 | $8,500.00 |
ITM-008 | Vendor License Renewal | Pending | 2026-03-25 | $6,200.00 |
ITM-009 | Warehouse Inventory Recount | Active | 2026-03-18 | $750.00 |
ITM-010 | Marketing Campaign Launch | Active | 2026-04-05 | $15,000.00 |
ITM-011 | HVAC System Replacement | Pending | 2026-05-01 | $34,000.00 |
ITM-012 | Software License Audit | Inactive | 2026-02-10 | $2,100.00 |
ITM-013 | Fleet Vehicle Inspection | Active | 2026-03-22 | $900.00 |
ITM-014 | Data Backup Verification | Active | 2026-03-12 | $450.00 |
ITM-015 | Office Furniture Refresh | Archived | 2025-11-15 | $5,600.00 |
ITM-016 | API Gateway Configuration | Active | 2026-03-27 | $3,200.00 |
ITM-017 | Compliance Training Update | Pending | 2026-04-10 | $1,800.00 |
ITM-018 | Customer Portal Redesign | Active | 2026-03-05 | $18,500.00 |
Page Size:
Total Rows: 18
Variant1_ClassicToolbar.tsx (Widget Implementation)
import { Box, Button, Checkbox, Group, Paper, Select, Text } from "@mantine/core";
import { HiArrowDownTray } from "react-icons/hi2";
import type { TableControlsProps } from "./types";
import { statusOptions } from "./sampleData";
import { TelerikStyleTable } from "./TelerikStyleTable";
/**
* Variant 1: Classic Toolbar
*
* Horizontal toolbar strip sits directly above the table with a shared border
* and matching background tint. Dropdown + Export left-aligned, checkbox right.
* The toolbar's bottom border is removed so it visually merges with the table top.
*/
export function Variant1_ClassicToolbar({
items,
statusFilter,
showActiveOnly,
onStatusFilterChange,
onShowActiveOnlyChange,
onExport,
}: TableControlsProps) {
return (
<Box p="md" style={{ height: "100%", overflow: "auto" }}>
{/* Toolbar — visually connected to table via shared border wrapper */}
<Paper
shadow="xs"
style={{
border: "1px solid #d0d0d0",
borderBottom: "none",
borderRadius: "8px 8px 0 0",
background: "#fafbfc",
}}
px="md"
py="sm"
>
<Group justify="space-between">
<Group gap="md">
<Select
placeholder="Filter by status"
data={statusOptions}
value={statusFilter}
onChange={onStatusFilterChange}
clearable
size="sm"
w={200}
/>
<Button
leftSection={<HiArrowDownTray size={16} />}
variant="light"
size="sm"
onClick={onExport}
>
Export
</Button>
</Group>
<Group gap="md">
<Checkbox
label="Show active only"
checked={showActiveOnly}
onChange={(e) => onShowActiveOnlyChange(e.currentTarget.checked)}
size="sm"
/>
<Text size="xs" c="dimmed">
{items.length} item{items.length !== 1 ? "s" : ""}
</Text>
</Group>
</Group>
</Paper>
{/* Table — top border-radius removed to merge with toolbar */}
<div style={{ borderRadius: "0 0 8px 8px", overflow: "hidden" }}>
<TelerikStyleTable items={items} />
</div>
</Box>
);
}