diff --git a/packages/core/package.json b/packages/core/package.json index 3c82c137..59939075 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -68,14 +68,14 @@ "@types/prismjs": "^1.26.3", "@typescript-eslint/eslint-plugin": "^6.15.0", "@typescript-eslint/parser": "^6.15.0", - "@viamrobotics/eslint-config": "^0.3.0", - "@viamrobotics/prettier-config": "^0.3.4", + "@viamrobotics/eslint-config": "^0.6.1", + "@viamrobotics/prettier-config": "^0.3.5", "@viamrobotics/typescript-config": "^0.1.0", "autoprefixer": "^10.4.16", "concurrently": "^8.2.2", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-sonarjs": "^0.23.0", + "eslint-plugin-sonarjs": "^1.0.4", "eslint-plugin-svelte": "^2.35.1", "eslint-plugin-tailwindcss": "^3.13.0", "eslint-plugin-unicorn": "^49.0.0", diff --git a/packages/core/src/lib/table/ag-grid-table.svelte b/packages/core/src/lib/table/ag-grid-table.svelte index 68ec39e8..78c660dc 100644 --- a/packages/core/src/lib/table/ag-grid-table.svelte +++ b/packages/core/src/lib/table/ag-grid-table.svelte @@ -4,6 +4,8 @@ > import { createGrid, + type ColDef, + type ColGroupDef, type GridApi, type GridOptions, type GridParams, @@ -11,30 +13,59 @@ import { import { onMount } from 'svelte'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-quartz.css'; -import classNames from 'classnames'; +import cx from 'classnames'; -export let options: GridOptions = {}; +/** Defines the columns to render. */ +export let columnDefs: (ColDef | ColGroupDef)[]; + +/** Defines the rows to be rendered. */ +export let rowData: DataType[]; + +export let options: Omit, 'columnDefs' | 'rowData'> = {}; export let params: GridParams = {}; +/** + * A CSS rule to set the height for the table. + * @default "500px" + */ +export let height = '500px'; + +/** Additional CSS classes to pass to the table. */ +let extraClasses: cx.Argument = ''; +export { extraClasses as cx }; + let grid: GridApi; let eGui: HTMLDivElement; -onMount(() => { - grid = createGrid(eGui, options, params); +$: grid?.updateGridOptions({ columnDefs }); +$: grid?.updateGridOptions({ rowData }); +$: grid?.updateGridOptions({ ...options }); - return () => { - grid.destroy(); - }; +onMount(() => { + grid = createGrid(eGui, { ...options, columnDefs, rowData }, params); + return () => grid.destroy(); }); -$: classes = classNames( - ($$restProps.class as string | undefined) ?? '', - 'ag-theme-quartz' -); +$: classes = cx('ag-theme-quartz rounded-none', extraClasses);
+ + diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte index 1aa64073..dccd49c2 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -456,98 +456,127 @@ let hoverDelayMS = 1000; const onHoverDelayMsInput = (event: Event) => { hoverDelayMS = Number.parseInt((event.target as HTMLInputElement).value, 10); }; + +let tableData = [ + { + id: 1, + first_name: 'Bobette', + last_name: 'Dankov', + email: 'bdankov0@cloudflare.com', + ip_address: '212.10.172.113', + }, + { + id: 2, + first_name: 'Jack', + last_name: 'Biaggelli', + email: 'jbiaggelli1@ibm.com', + ip_address: '147.246.244.8', + }, + { + id: 3, + first_name: 'Dalli', + last_name: 'Spain', + email: 'dspain2@webs.com', + ip_address: '230.60.71.89', + }, + { + id: 4, + first_name: 'Berte', + last_name: 'Simonard', + email: 'bsimonard3@livejournal.com', + ip_address: '249.139.115.176', + }, + { + id: 5, + first_name: 'Desirae', + last_name: 'Kondratyuk', + email: 'dkondratyuk4@a8.net', + ip_address: '37.201.201.199', + }, + { + id: 6, + first_name: 'Susannah', + last_name: 'Ilchuk', + email: 'silchuk5@tinyurl.com', + ip_address: '129.106.9.65', + }, + { + id: 7, + first_name: 'Koren', + last_name: 'Priditt', + email: 'kpriditt6@histats.com', + ip_address: '133.252.171.244', + }, + { + id: 8, + first_name: 'Silvano', + last_name: 'Dell Casa', + email: 'sdellcasa7@51.la', + ip_address: '100.135.33.162', + }, + { + id: 9, + first_name: 'Jens', + last_name: 'Darthe', + email: 'jdarthe8@vinaora.com', + ip_address: '240.64.233.124', + }, + { + id: 10, + first_name: 'Lynett', + last_name: 'Brakewell', + email: 'lbrakewell9@ucsd.edu', + ip_address: '235.217.168.168', + }, +]; + +const removeTableRow = () => { + const [_, ...data] = tableData; + tableData = [...data]; +};
valueB ? 1 : -1; + }, + }, + { + field: 'last_name', + headerName: 'Last name', + unSortIcon: true, + comparator(valueA, valueB) { + return valueA > valueB ? 1 : -1; + }, + }, + { + field: 'email', + headerName: 'Email', + unSortIcon: true, + comparator(valueA, valueB) { + return valueA > valueB ? 1 : -1; + }, + }, + { field: 'ip_address', headerName: 'IP address', filter: true }, + ]} + rowData={tableData} options={{ defaultColDef: { flex: 1, }, - columnDefs: [ - { field: 'id', headerName: 'ID' }, - { field: 'first_name', headerName: 'First name' }, - { field: 'last_name', headerName: 'Last name' }, - { field: 'email', headerName: 'Email' }, - { field: 'ip_address', headerName: 'IP address' }, - ], - rowData: [ - { - id: 1, - first_name: 'Bobette', - last_name: 'Dankov', - email: 'bdankov0@cloudflare.com', - ip_address: '212.10.172.113', - }, - { - id: 2, - first_name: 'Jack', - last_name: 'Biaggelli', - email: 'jbiaggelli1@ibm.com', - ip_address: '147.246.244.8', - }, - { - id: 3, - first_name: 'Dalli', - last_name: 'Spain', - email: 'dspain2@webs.com', - ip_address: '230.60.71.89', - }, - { - id: 4, - first_name: 'Berte', - last_name: 'Simonard', - email: 'bsimonard3@livejournal.com', - ip_address: '249.139.115.176', - }, - { - id: 5, - first_name: 'Desirae', - last_name: 'Kondratyuk', - email: 'dkondratyuk4@a8.net', - ip_address: '37.201.201.199', - }, - { - id: 6, - first_name: 'Susannah', - last_name: 'Ilchuk', - email: 'silchuk5@tinyurl.com', - ip_address: '129.106.9.65', - }, - { - id: 7, - first_name: 'Koren', - last_name: 'Priditt', - email: 'kpriditt6@histats.com', - ip_address: '133.252.171.244', - }, - { - id: 8, - first_name: 'Silvano', - last_name: 'Dell Casa', - email: 'sdellcasa7@51.la', - ip_address: '100.135.33.162', - }, - { - id: 9, - first_name: 'Jens', - last_name: 'Darthe', - email: 'jdarthe8@vinaora.com', - ip_address: '240.64.233.124', - }, - { - id: 10, - first_name: 'Lynett', - last_name: 'Brakewell', - email: 'lbrakewell9@ucsd.edu', - ip_address: '235.217.168.168', - }, - ], }} /> + +