All files / blong-browser/src/components/Editor/stories TableToolbar.stories.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * TableToolbar stories — table widget with Add/Delete toolbar.
 *
 * Demonstrates a table card where the toolbar label acts as the card title
 * and custom actions appear on the right (via widget.label pattern).
 */
import type { Meta } from '@storybook/react-vite';
import type { StoryFn } from '../Editor.stories.js';
import { Editor } from '../Editor.js';

const meta: Meta<typeof Editor> = {title: 'Editor/TableToolbar', component: Editor};
export default meta;

export const TableToolbar: StoryFn = () => (
    <Editor
        schema={{
            properties: {
                table: {
                    title: '',
                    type: 'array',
                    widget: {
                        type: 'table',
                        label: 'Items',
                        columns: ['id', 'name'],
                    },
                    items: {
                        properties: {
                            id: {title: 'ID', type: 'integer'},
                            name: {title: 'Name'},
                        },
                    },
                },
            },
        }}
        cards={{
            center: {label: undefined, widgets: ['table']},
        }}
        value={{
            table: [
                {id: 1, name: 'row 1'},
                {id: 2, name: 'row 2'},
                {id: 3, name: 'row 3'},
            ],
        }}
        editable
        editMode
        layout="edit"
        layouts={{edit: ['center']}}
    />
);