jamsrui_datagrid_basic_columns_and_rows_quickstart.ts

1"use client";
2import React from "react";
3import { DataGrid, type createColumns } from "@jamsrui/data-grid";
4
5type User = {
6  id: number;
7  name: string;
8  email: string;
9  role: string;
10};
11
12const columns: createColumns<User>[] = [
13  {
14    accessorKey: "id",
15    header: "ID",
16  },
17  {
18    accessorKey: "name",
19    header: "Name",
20  },
21  {
22    accessorKey: "email",
23    header: "Email",
24  },
25  {
26    accessorKey: "role",
27    header: "Role",
28  },
29];
30
31const rows: User[] = [
32  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
33  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
34  { id: 3, name: "Alice Johnson", email: "alice@example.com", role: "Editor" },
35];
36
37export default function DataGridQuickstart() {
38  return (
39    <div style={{ height: 400, width: "100%" }}>
40      <DataGrid 
41        columns={columns} 
42        rows={rows} 
43        rowCount={rows.length}
44      />
45    </div>
46  );
47}