Quickstart

💡 Basic Example

Once installed, you can start using BlazeTable like this:


"use client";
 
import {
  Table,
  TableRoot,
  TableHeader,
  TableBody,
  TableRow,
  TableCell,
} from "@blazetable/basic";
 
const data = [
  { id: 1, name: "Alice", role: "Developer" },
  { id: 2, name: "Bob", role: "Designer" },
];
 
const columns = [
  { header: "ID", accessorKey: "id" },
  { header: "Name", accessorKey: "name" },
  { header: "Role", accessorKey: "role" },
];
 
export default function ExampleTable() {
  return (
    <TableRoot data={data} columns={columns}>
      <Table>
        <TableHeader />
        <TableBody />
      </Table>
    </TableRoot>
  );
}

⚠️ Chakra UI Reminder

If you see styling issues or components not rendering as expected, confirm that your React app is wrapped with ChakraProvider:


import { ChakraProvider } from "@chakra-ui/react";
 
function App() {
  return (
    <ChakraProvider>
      <YourComponents />
    </ChakraProvider>
  );
}

🎉 Next Steps

Learn about Basic Usage — sorting, filtering, and pagination.
Explore Pro Usage for server-side and advanced features.

You’re all set to build fast and flexible tables!