jamsrui_table_quickstart_with_column_definitions_react.ts

1import React from 'react';
2import { Table, ColumnProps } from '@jamsrui/table';
3
4interface DataItem {
5  id: number;
6  name: string;
7  email: string;
8  role: string;
9}
10
11const data: DataItem[] = [
12  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
13  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
14  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' },
15];
16
17const columns: ColumnProps<DataItem>[] = [
18  {
19    title: 'ID',
20    dataIndex: 'id',
21    key: 'id',
22  },
23  {
24    title: 'Name',
25    dataIndex: 'name',
26    key: 'name',
27  },
28  {
29    title: 'Email',
30    dataIndex: 'email',
31    key: 'email',
32  },
33  {
34    title: 'Role',
35    dataIndex: 'role',
36    key: 'role',
37  },
38];
39
40const App: React.FC = () => {
41  return (
42    <div style={{ padding: '20px' }}>
43      <h1>User Directory</h1>
44      <Table<DataItem>
45        columns={columns}
46        dataSource={data}
47        rowKey="id"
48      />
49    </div>
50  );
51};
52
53export default App;