jamsrui_table_basic_data_table_with_columns_and_datasource.ts

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