Published
Edited
Oct 19, 2020
1 fork
Importers
1 star
App = {
return function App() {
const columns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'Age',
accessor: 'age',
},
{
Header: 'Visits',
accessor: 'visits',
},
{
Header: 'Status',
accessor: 'status',
},
{
Header: 'Profile Progress',
accessor: 'progress',
},
],
},
],
[]
)
const data = React.useMemo(() => makeTableData(10), [])
return htm`
<${Styles}>
<${Table} columns=${columns} data=${data} />
</${Styles}>
`
}
}
Table = {
return function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = ReactTable.useTable({
columns,
data,
})
return htm`
<table ...${getTableProps()}>
<thead>
${headerGroups.map(headerGroup => (
htm`<tr ...${headerGroup.getHeaderGroupProps()}>
${headerGroup.headers.map(column => (
htm`<th ...${column.getHeaderProps()}>${column.render('Header')}</th>`
))}
</tr>`
))}
</thead>
<tbody ...${getTableBodyProps()}>
${rows.map((row, i) => {
prepareRow(row)
return htm`
<tr ...${row.getRowProps()}>
${row.cells.map(cell => {
return htm`<td ...${cell.getCellProps()}>${cell.render('Cell')}</td>`
})}
</tr>
`
})}
</tbody>
</table>
`
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
