feat(components): use gridjs for mutation table

#17, #16

components/package.json

@@ -31,6 +31,7 @@
         "@lit/task": "^1.0.0",
         "chart.js": "^4.4.2",
         "dayjs": "^1.11.10",
+        "gridjs": "^6.2.0",
         "lit": "^3.1.2"
     },
     "devDependencies": {

components/src/components/container/component-table.stories.ts

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components';
+import './component-table';
+
+const meta: Meta = {
+    title: 'Component/Table',
+    component: 'gs-component-table',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+export const ComponentTableStory: StoryObj = {
+    render: (args) => {
+        return html` <gs-component-table .data=${args.data} .columns=${args.columns}></gs-component-table> `;
+    },
+    args: {
+        data: [
+            ['John Do', 'john@example.com', '123-456-7890'],
+            ['Jane Doe', 'jane@example.com', '098-765-4321'],
+        ],
+        columns: [{ name: 'Name' }, { name: 'Email', sort: false }, { name: 'Phone Number' }],
+    },
+};

components/src/components/container/component-table.ts

@@ -0,0 +1,70 @@
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+
+import { Grid } from 'gridjs';
+import 'gridjs/dist/theme/mermaid.css';
+
+import style from 'gridjs/dist/theme/mermaid.css?inline';
+import { OneDArray, TColumn, TData } from 'gridjs/dist/src/types';
+import { ComponentChild } from 'preact';
+import { PaginationConfig } from 'gridjs/dist/src/view/plugin/pagination';
+
+const tableFontSize = '12px';
+
+export const tableStyle = {
+    table: {
+        'font-size': tableFontSize,
+    },
+    th: {
+        padding: '4px',
+        textAlign: 'center',
+    },
+    td: {
+        textAlign: 'center',
+        padding: '8px',
+    },
+    footer: {
+        'font-size': tableFontSize,
+    },
+};
+
+@customElement('gs-component-table')
+export class ComponentTable extends LitElement {
+    @property({ type: Array })
+    data: TData = [];
+
+    @property({ type: Array })
+    columns: OneDArray<TColumn | string | ComponentChild> = [];
+
+    @property({ type: Object })
+    pagination: PaginationConfig | boolean = true;
+
+    private grid: Grid | undefined;
+
+    static override styles = unsafeCSS(style);
+
+    @query('#grid-table') tableContainer!: HTMLElement;
+
+    override firstUpdated() {
+        this.grid = new Grid({
+            columns: this.columns,
+            data: this.data,
+            pagination: this.pagination,
+            style: tableStyle,
+        });
+
+        this.grid.render(this.tableContainer);
+    }
+
+    override updated() {
+        this.grid?.updateConfig({
+            columns: this.columns,
+            data: this.data,
+            pagination: this.pagination,
+        });
+    }
+
+    override render() {
+        return html` <div id="grid-table"></div> `;
+    }
+}