DataTable Selection Bar

1/**
2 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
3 *
4 * Before reporting anything: please check the changelog first.
5 *  - In-repo: ./CHANGELOG.md
6 *  - Docs site: https://niko-table.com/changelog
7 *
8 * Found a bug or have a fix? Open an issue or PR on GitHub so other
9 * users (and future LLMs reading this code) benefit:
10 * https://github.com/Semkoo/niko-table-registry
11 */
12 
13import * as React from "react"
14import { Button } from "@/components/ui/button"
15import { Badge } from "@/components/ui/badge"
16 
17interface DataTableSelectionBarProps {
18  selectedCount: number
19  onClear?: () => void
20  children?: React.ReactNode
21  className?: string
22}
23 
24/**
25 * Reusable selection bar. Memoized so table-state changes don't re-render
26 * unchanged selection state. Pass children to add custom action buttons.
27 */
28export const DataTableSelectionBar = React.memo(function DataTableSelectionBar({
29  selectedCount,
30  onClear,
31  children,
32  className,
33}: DataTableSelectionBarProps) {
34  if (selectedCount === 0) return null
35 
36  return (
37    <div className={className}>
38      <div className="flex items-center justify-between rounded-lg border border-border bg-muted/50 px-4 py-3">
39        <div className="flex items-center gap-2">
40          <Badge variant="secondary">{selectedCount}</Badge>
41          <span className="text-sm text-muted-foreground">
42            {selectedCount === 1 ? "row selected" : "rows selected"}
43          </span>
44          {onClear && (
45            <Button
46              variant="ghost"
47              size="sm"
48              onClick={onClear}
49              className="h-7 px-2 text-xs"
50            >
51              Clear
52            </Button>
53          )}
54        </div>
55        {children && <div className="flex items-center gap-2">{children}</div>}
56      </div>
57    </div>
58  )
59})