|
| 1 | +import type { Meta, StoryObj } from 'storybook-solidjs-vite' |
| 2 | +import { ActiveRange, Table } from 'src' |
| 3 | +import { createSignal } from 'solid-js' |
| 4 | +import { fn } from 'storybook/test' |
| 5 | + |
| 6 | +const meta = { |
| 7 | + args: { |
| 8 | + columns: ['A', 'B', 'C', 'D', 'E'], |
| 9 | + numRows: 10, |
| 10 | + accentColor: '#de3b84', |
| 11 | + setCellValue: fn(), |
| 12 | + }, |
| 13 | + render: props => { |
| 14 | + const [activeRange, setActiveRange] = createSignal<ActiveRange>() |
| 15 | + const [widths, setWidths] = createSignal(new Map<string, number>()) |
| 16 | + |
| 17 | + return ( |
| 18 | + <div |
| 19 | + style={{ |
| 20 | + height: '100%', |
| 21 | + 'border-radius': '6px', |
| 22 | + overflow: 'hidden', |
| 23 | + '--solid-tabular-accent-color': props.accentColor, |
| 24 | + }} |
| 25 | + > |
| 26 | + <Table |
| 27 | + {...props} |
| 28 | + getCellValue={(row, col) => `${col}${row}`} |
| 29 | + activeRange={activeRange()} |
| 30 | + setActiveRange={setActiveRange} |
| 31 | + getColumnSize={col => widths().get(col)} |
| 32 | + setColumnSize={(col, size) => setWidths(w => new Map([...w, [col, size]]))} |
| 33 | + resetColumnSize={col => setWidths(w => new Map([...w].filter(e => e[0] !== col)))} |
| 34 | + columnsResizeable |
| 35 | + getCellEditable={() => true} |
| 36 | + /> |
| 37 | + </div> |
| 38 | + ) |
| 39 | + }, |
| 40 | +} satisfies Meta<{ |
| 41 | + columns: string[] |
| 42 | + numRows: number |
| 43 | + accentColor: string |
| 44 | + setCellValue: (row: number, column: string, value: string) => void |
| 45 | +}> |
| 46 | + |
| 47 | +export default meta |
| 48 | + |
| 49 | +type Story = StoryObj<typeof meta> |
| 50 | + |
| 51 | +export const BasicUsage = { |
| 52 | + args: {}, |
| 53 | +} satisfies Story |
0 commit comments