Data Table

import {
  DataTable,
  createColumnHelper,
  selectionColumn,
  rowActionsColumn,
} from "@/components/micto/data-table"
import { ToolbarAction } from "@/components/micto/table-toolbar"
import { Button } from "@/components/ui/button"
import { Eye, Pencil, Trash2, Plus } from "lucide-react"

type Employee = { id: string; name: string; department: string }

const col = createColumnHelper<Employee>()

const columns = [
  selectionColumn<Employee>(),
  col.accessor("name", { header: "Name" }),
  col.accessor("department", { header: "Department" }),
  rowActionsColumn<Employee>({
    actions: () => [
      { label: "View",   icon: Eye,    onClick: (r) => console.log(r) },
      { label: "Edit",   icon: Pencil, onClick: (r) => console.log(r) },
      { label: "Delete", icon: Trash2, variant: "destructive", onClick: (r) => console.log(r) },
    ],
  }),
]

const employees: Employee[] = [
  { id: "1", name: "Juan Dela Cruz", department: "ICT" },
  { id: "2", name: "Maria Clara", department: "HR" },
]

export default function EmployeesPage() {
  return (
    <DataTable
      data={employees}
      columns={columns}
      tableId="employees"
      enableRowSelection
      enableColumnVisibility
      pagination="client"
      pageSize={10}
      pageSizeOptions={[10, 25, 50]}
      toolbarProps={{
        actions: (
          <Button>
            <Plus className="mr-2 h-4 w-4" /> Add Employee
          </Button>
        ),
        bulkActions: (rows) => (
          <ToolbarAction icon={Trash2} variant="destructive">
            Delete {rows.length}
          </ToolbarAction>
        ),
      }}
    />
  )
}

import { DataTable } from "@/components/micto/data-table"

type Deduction = { name: string; amount: number }

const deductions: Deduction[] = [
  { name: "SSS", amount: 500 },
  { name: "PhilHealth", amount: 250 },
]

const deductionColumns = [
  { accessorKey: "name", header: "Deduction Name" },
  { accessorKey: "amount", header: "Amount" },
]

export default function FlatTable() {
  return (
    <DataTable
      data={deductions}
      columns={deductionColumns}
      pagination={false}
      toolbar={false}
      density="compact"
    />
  )
}

import * as React from "react"
import { DataTable, ColumnDef, SortingState } from "@/components/micto/data-table"

type User = { id: string; name: string; email: string }

const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
]

export default function ServerPaginatedTable() {
  const [data, setData] = React.useState<User[]>([])
  const [isLoading, setIsLoading] = React.useState(false)
  const [page, setPage] = React.useState(1)
  const [pageSize, setPageSize] = React.useState(10)
  const [totalPages, setTotalPages] = React.useState(1)
  const [totalCount, setTotalCount] = React.useState(0)
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [search, setSearch] = React.useState("")

  // Trigger data fetching in your component using page, pageSize, sorting, search...

  return (
    <DataTable
      data={data}
      columns={columns}
      isLoading={isLoading}
      pagination="server"
      currentPage={page}
      totalPages={totalPages}
      totalCount={totalCount}
      onPageChange={setPage}
      pageSize={pageSize}
      pageSizeOptions={[10, 25, 50]}
      onPageSizeChange={setPageSize}
      manualSorting
      onSortingChange={setSorting}
      onSearchChange={setSearch} // debounced 300ms, fires your API
    />
  )
}

import React from "react"
import { router } from "@inertiajs/react"
import {
  DataTable,
  createColumnHelper,
  indexColumn,
  rowActionsColumn,
} from "@/components/micto/data-table"
import { Button } from "@/components/ui/button"
import { Plus, Eye, Pencil, Trash2 } from "lucide-react"

type Employee = {
  id: string;
  name: string;
  department: string;
  deleted_at: string | null;
}

const col = createColumnHelper<Employee>()
const columns = [
  indexColumn<Employee>(),
  col.accessor("name", { header: "Name" }),
  col.accessor("department", { header: "Department" }),
  rowActionsColumn<Employee>({
    actions: (row) => [
      { label: "View Profile", icon: Eye,    onClick: (r) => router.get(`/employees/${r.id}`) },
      { label: "Edit",         icon: Pencil, onClick: (r) => router.get(`/employees/${r.id}/edit`) },
      { label: "Delete",       icon: Trash2, variant: "destructive", onClick: (r) => router.delete(`/employees/${r.id}`) },
    ],
  }),
]

export default function EmployeesIndex({ records, filters }: {
  records: { data: Employee[]; current_page: number; last_page: number; total: number };
  filters: { search?: string; sorting?: unknown; trashed?: string; pageSize?: number };
}) {
  // Helper to update Inertia URL params while preserving page state/scroll
  const updateQuery = (newParams: Record<string, unknown>) => {
    router.get(
      window.location.pathname,
      { ...filters, ...newParams },
      { preserveState: true, preserveScroll: true }
    )
  }

  return (
    <DataTable
      data={records.data}
      columns={columns}
      pagination="server"
      currentPage={records.current_page}
      totalPages={records.last_page}
      totalCount={records.total}
      pageSize={Number(filters.pageSize ?? 10)}
      pageSizeOptions={[10, 25, 50]}

      // Filter Handlers -> Triggers Inertia router.get()
      onPageChange={(page) => updateQuery({ page })}
      onPageSizeChange={(pageSize) => updateQuery({ pageSize, page: 1 })}
      onSearchChange={(search) => updateQuery({ search, page: 1 })}
      onSortingChange={(sorting) => updateQuery({ sorting, page: 1 })}

      // Trashed / Soft Delete Toggle
      enableTrashed={true}
      trashed={filters.trashed === "true"}
      onTrashedChange={(trashed) => updateQuery({ trashed, page: 1 })}

      toolbarProps={{
        actions: (
          <Button size="sm" className="h-8 text-xs" onClick={() => router.get("/employees/create")}>
            <Plus className="size-3.5 mr-1.5" />
            Add Employee
          </Button>
        ),
      }}
    />
  )
}

import * as React from "react"
import { DataTable, ColumnDef } from "@/components/micto/data-table"

type Employee = { id: string; name: string }

const columns: ColumnDef<Employee>[] = [
  { accessorKey: "name", header: "Name" },
]

const activeEmployees: Employee[] = [{ id: "1", name: "Juan Dela Cruz" }]
const trashedEmployees: Employee[] = [{ id: "2", name: "Maria Clara (Archived)" }]

export default function TrashedExample() {
  const [isTrashed, setIsTrashed] = React.useState(false)

  // In client mode, swap data. In server mode, pass trashed parameter to API query
  const currentData = isTrashed ? trashedEmployees : activeEmployees

  return (
    <DataTable
      data={currentData}
      columns={columns}
      enableTrashed
      trashed={isTrashed}
      onTrashedChange={setIsTrashed}
      trashedLabel="Show Trashed"
      trashedActiveLabel="Viewing Trashed"
    />
  )
}

import {
  selectionColumn,   // checkbox with select-all
  indexColumn,       // row number (#)
  rowActionsColumn,  // ⋮ actions dropdown
  createColumnHelper,
} from "@/components/micto/data-table"
import { Eye, Pencil, UserX, Trash2 } from "lucide-react"

type Employee = {
  id: string
  name: string
  status: "active" | "inactive"
}

// Conceptual router & helper overrides
const router = {
  push: (path: string) => console.log("Navigate to", path),
}
const openEditModal = (employee: Employee) => console.log("Edit", employee)
const deactivate = (employee: Employee) => console.log("Deactivate", employee)
const deleteEmployee = (employee: Employee) => console.log("Delete", employee)

const col = createColumnHelper<Employee>()

const columns = [
  selectionColumn<Employee>(),
  indexColumn<Employee>({ header: "#" }),

  col.accessor("name", {
    header: "Full Name",
    cell: (info) => (
      <span className="font-medium">{info.row.original.name}</span>
    ),
  }),

  rowActionsColumn<Employee>({
    // actions receives the full row data object; use it to conditionally hide/disable
    actions: (row) => [
      { label: "View",       icon: Eye,    onClick: (r) => router.push(`/employees/${r.id}`) },
      { label: "Edit",       icon: Pencil, onClick: (r) => openEditModal(r) },
      { label: "Deactivate", icon: UserX,  onClick: (r) => deactivate(r), separator: true },
      {
        label: "Delete",
        icon: Trash2,
        variant: "destructive",
        disabled: row.status === "inactive",
        onClick: (r) => deleteEmployee(r),
      },
    ],
  }),
]