jamsrui_data_grid_quickstart_with_column_definitions.ts

1import React from 'react';
2import { DataGrid, type GridColDef } from '@jamsrui/data-grid';
3
4interface Row {
5  id: number;
6  lastName: string;
7  firstName: string;
8  age: number;
9}
10
11const columns: GridColDef<Row>[] = [
12  { field: 'id', headerName: 'ID', width: 90 },
13  {
14    field: 'firstName',
15    headerName: 'First name',
16    width: 150,
17    editable: true,
18  },
19  {
20    field: 'lastName',
21    headerName: 'Last name',
22    width: 150,
23    editable: true,
24  },
25  {
26    field: 'age',
27    headerName: 'Age',
28    type: 'number',
29    width: 110,
30    editable: true,
31  },
32];
33
34const rows: Row[] = [
35  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
36  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
37  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
38  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
39  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
40];
41
42export default function QuickStartDataGrid() {
43  return (
44    <div style={{ height: 400, width: '100%' }}>
45      <DataGrid
46        rows={rows}
47        columns={columns}
48        getRowId={(row) => row.id}
49        checkboxSelection
50        disableRowSelectionOnClick
51      />
52    </div>
53  );
54}