Support table row variants

viamrobotics · Sep 10, 2024 · bcc8379 · bcc8379
1 parent 068db6c
commit bcc8379
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/packages/core/src/lib/table/ag-grid-table.svelte b/packages/core/src/lib/table/ag-grid-table.svelte
@@ -1,16 +1,19 @@
+<svelte:options immutable />
+
 <script
   lang="ts"
   context="module"
 >
-import { ModuleRegistry } from '@ag-grid-community/core';
+import { ModuleRegistry, type RowClassRules } from '@ag-grid-community/core';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import type { TableRowVariant } from './table-row-variant';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule]);
 </script>
 
 <script
   lang="ts"
-  generics="DataType extends unknown"
+  generics="DataType extends ({[key: string]: unknown, variant?: TableRowVariant})"
 >
 import {
   createGrid,
@@ -47,12 +50,28 @@ export { extraClasses as cx };
 let grid: GridApi<DataType>;
 let eGui: HTMLDivElement;
 
+$: rowClassRules = {
+  '!border-red-100 !bg-red-50 !text-red-500': ({ data }) =>
+    data?.variant === 'error',
+  '!border-green-100 !bg-green-50 !text-green-700': ({ data }) =>
+    data?.variant === 'success',
+  '!bg-gray-50 !text-gray-500': ({ data }) => data?.variant === 'disabled',
+  ...options.rowClassRules,
+} as RowClassRules<DataType>;
+
 $: grid?.updateGridOptions({ columnDefs });
 $: grid?.updateGridOptions({ rowData });
-$: grid?.updateGridOptions({ ...options });
+$: grid?.updateGridOptions({
+  ...options,
+  rowClassRules,
+});
 
 onMount(() => {
-  grid = createGrid(eGui, { ...options, columnDefs, rowData }, params);
+  grid = createGrid(
+    eGui,
+    { ...options, columnDefs, rowData, rowClassRules },
+    params
+  );
   return () => grid.destroy();
 });
 

diff --git a/packages/core/src/lib/table/table-row-variant.ts b/packages/core/src/lib/table/table-row-variant.ts
@@ -0,0 +1 @@
+export type TableRowVariant = 'success' | 'disabled' | 'error' | '';
diff --git a/packages/core/src/lib/table/table-row.svelte b/packages/core/src/lib/table/table-row.svelte
@@ -12,15 +12,9 @@ A table row.
 -->
 <svelte:options immutable />
 
-<script
-  lang="ts"
-  context="module"
->
-export type TableRowVariant = 'success' | 'disabled' | 'error' | '';
-</script>
-
 <script lang="ts">
 import cx from 'classnames';
+import type { TableRowVariant } from './table-row-variant';
 
 /** The communicated type of the table row. */
 export let variant: TableRowVariant = '';

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -471,20 +471,23 @@ let tableData = [
     last_name: 'Biaggelli',
     email: '[email protected]',
     ip_address: '147.246.244.8',
+    variant: 'error',
   },
   {
     id: 3,
     first_name: 'Dalli',
     last_name: 'Spain',
     email: '[email protected]',
     ip_address: '230.60.71.89',
+    variant: 'success',
   },
   {
     id: 4,
     first_name: 'Berte',
     last_name: 'Simonard',
     email: '[email protected]',
     ip_address: '249.139.115.176',
+    variant: 'disabled',
   },
   {
     id: 5,