Open VegarRingdalAibel opened 1 year ago
page.tsx
import { Datasource, GridInterface } from "@simple-html/grid";
import React from "react";
import { SimpleHtmlGrid } from "./components/SimpleHtmlGrid";
import { SetGridTheme } from "./components/SetGridTheme";
/**
* dummy data
*/
let DummyRow = {
ID: 0,
STATUS: "Issued for IDC",
DISCIPLINE: "PROCESS",
TAG_NO: "A-20VA001",
DESCRIPTION: "INLET SEP",
DOCID: "C232-AI-R-DS-0001",
LINE_EQUIPMENT: "KJSD"
};
let DummyRows = [];
for (let i = 1; i < 1000; i++) {
const x = structuredClone(DummyRow);
x.ID = i;
DummyRows.push(x);
}
/**
* datasource
*/
const dataSource = new Datasource();
dataSource.setData(DummyRows);
/**
* grid interface
*/
const gridInterface = new GridInterface(
{
columnsCenter: [
{ width: 250, rows: ["STATUS"] },
{ width: 150, rows: ["DISCIPLINE"] },
{ width: 250, rows: ["TAG_NO"] },
{ width: 350, rows: ["DESCRIPTION"] },
{ width: 250, rows: ["DOCID"] },
{ width: 250, rows: ["LINE_EQUIPMENT"] }
],
attributes: [/* will generate default to text type if empty */]
},
dataSource
);
/**
* page
* @returns
*/
export function ObjectAll() {
return (
<div className="flex flex-1 m-2">
<SetGridTheme={true} />
<SimpleHtmlGrid className="simple-html-grid w-full" interface={gridInterface} />
</div>
);
}
Sample of grid as component and theme component Took some work at work removed some parts. Update for : https://github.com/vegarringdal/simple-html/issues/29
SimpleHtmlGrid.tsx
SetGridTheme.tsx