File size: 1,521 Bytes
a85305f |
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
"use client"
import { ReactGrid, Column, Row } from "@silevis/reactgrid"
import "@silevis/reactgrid/styles.css"
import { useState } from "react"
type RowData = Record<string, string>
const nbColumns = 20
const getRowsData = (nbLayers: number, nbShots: number): RowData[] => [
{ name: "Thomas", surname: "Goldman" },
{ name: "Susie", surname: "Quattro" },
{ name: "", surname: "" }
];
const getColumns = (nbColumns: number): Column[] => {
const columns: Column[] = []
for (let i = 0; i < nbColumns; i++) {
columns.push({
columnId: `Shot ${i}`,
width: 150,
})
}
return columns
}
const getRows = (nbShots: number, rows: RowData[]): Row[] => [
{
rowId: 'header',
cells: [...Array(nbShots)].map((_, i) => ({
type: "text",
text: `Shot ${i}`,
})),
},
...rows.map<Row>((row, idx) => ({
rowId: idx,
cells: Object.entries(row).map(([_, value]) => ({
type: "text",
text: value
}))
}))
]
export function Timeline() {
const nbLayers = 8
const nbShots = 30
const [rowsData] = useState<RowData[]>(getRowsData(nbLayers, nbShots))
const rows = getRows(nbShots, rowsData)
const columns = getColumns(nbShots)
return (
<ReactGrid
rows={rows}
columns={columns}
onCellsChanged={(changes) => {
const change = changes[0]
const { columnId, newCell, previousCell, rowId, type } = change
console.log('change:', { columnId, newCell, previousCell, rowId, type })
}}
/>
)
} |