44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { createMemo } from 'solid-js';
|
|
import { SSDataTable, SSHeader, SSSurface } from 'src';
|
|
import { demoRows, renderStatus } from '../../demo/content';
|
|
|
|
const DataPage: Component = () => {
|
|
const columns = createMemo(() => [
|
|
{
|
|
label: 'Name',
|
|
render: (row: (typeof demoRows)[number]) => row.name,
|
|
sortKey: (row: (typeof demoRows)[number]) => row.name,
|
|
},
|
|
{
|
|
label: 'Role',
|
|
render: (row: (typeof demoRows)[number]) => row.role,
|
|
sortKey: (row: (typeof demoRows)[number]) => row.role,
|
|
},
|
|
{
|
|
label: 'Status',
|
|
render: (row: (typeof demoRows)[number]) => renderStatus(row.status),
|
|
sortKey: (row: (typeof demoRows)[number]) => row.status,
|
|
},
|
|
{
|
|
label: 'Updated',
|
|
render: (row: (typeof demoRows)[number]) => row.updated,
|
|
sortKey: (row: (typeof demoRows)[number]) => row.updated,
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<div class="demo_page">
|
|
<SSHeader title="Data table" subtitle="Sorting, paging, and quick actions." />
|
|
<SSDataTable
|
|
columns={columns()}
|
|
rows={demoRows}
|
|
pageSize={3}
|
|
onRowClick={async () => {}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DataPage;
|