DataTable

import { DataTable } from "@optiaxiom/react/unstable";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
import { columns } from "./columns";
import { data } from "./data";
 
export function App() {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
  });
  return <DataTable table={table} />;
}

import { Badge } from "@optiaxiom/react";
import { createColumnHelper } from "@tanstack/react-table";
 
const columnHelper = createColumnHelper<{
  amount: number;
  firstName: string;
  lastName: string;
  status: "failed" | "processing" | "success";
}>();
 
const mapStatusToIntent = {
  failed: "danger",
  processing: "warning",
  success: "success",
} as const;
 
export const columns = [
  columnHelper.accessor("firstName", {
    header: "First Name",
  }),
  columnHelper.accessor("lastName", {
    header: "Last Name",
  }),
  columnHelper.accessor("status", {
    cell: ({ getValue }) => (
      <Badge intent={mapStatusToIntent[getValue()]}>{getValue()}</Badge>
    ),
    header: "Status",
  }),
  columnHelper.accessor("amount", {
    cell: ({ renderValue }) => `$${renderValue()}`,
    header: "Amount",
  }),
];

export const data = [
  {
    amount: 20,
    firstName: "Arthur",
    lastName: "Morgan",
    status: "success" as const,
  },
  {
    amount: 12.75,
    firstName: "John",
    lastName: "Marston",
    status: "processing" as const,
  },
  {
    amount: 1.25,
    firstName: "Micah",
    lastName: "Bell",
    status: "failed" as const,
  },
];