feat: addGridLayout

src/lib/plugins/addGridLayout.ts

@@ -0,0 +1,91 @@
+import type {
+	TableAttributes,
+	TableBodyAttributes,
+	TableHeadAttributes,
+} from '$lib/createViewModel';
+import type { DeriveFn, NewTablePropSet, TablePlugin } from '$lib/types/TablePlugin';
+import { derived } from 'svelte/store';
+
+export const addGridLayout =
+	<Item>(): TablePlugin<
+		Item,
+		Record<string, never>,
+		Record<string, never>,
+		NewTablePropSet<never>
+	> =>
+	({ tableState }) => {
+		const pluginState = {};
+
+		const deriveTableAttrs: DeriveFn<TableAttributes<Item>> = (attrs) => {
+			return derived([attrs, tableState.visibleColumns], ([$attrs, $visibleColumns]) => {
+				return {
+					...$attrs,
+					style: {
+						display: 'grid',
+						'grid-template-columns': `repeat(${$visibleColumns.length}, auto)`,
+					},
+				};
+			});
+		};
+
+		const deriveTableHeadAttrs: DeriveFn<TableHeadAttributes<Item>> = (attrs) => {
+			return derived(attrs, ($attrs) => {
+				return {
+					...$attrs,
+					style: {
+						display: 'contents',
+					},
+				};
+			});
+		};
+
+		const deriveTableBodyAttrs: DeriveFn<TableBodyAttributes<Item>> = (attrs) => {
+			return derived(attrs, ($attrs) => {
+				return {
+					...$attrs,
+					style: {
+						display: 'contents',
+					},
+				};
+			});
+		};
+
+		return {
+			pluginState,
+			deriveTableAttrs,
+			deriveTableHeadAttrs,
+			deriveTableBodyAttrs,
+			hooks: {
+				'thead.tr': () => {
+					const attrs = derived([], () => {
+						return {
+							style: {
+								display: 'contents',
+							},
+						};
+					});
+					return { attrs };
+				},
+				'thead.tr.th': (cell) => {
+					const attrs = derived([], () => {
+						return {
+							style: {
+								'grid-column': `${cell.colstart + 1} / span ${cell.colspan}`,
+							},
+						};
+					});
+					return { attrs };
+				},
+				'tbody.tr': () => {
+					const attrs = derived([], () => {
+						return {
+							style: {
+								display: 'contents',
+							},
+						};
+					});
+					return { attrs };
+				},
+			},
+		};
+	};

src/lib/plugins/index.ts

@@ -8,6 +8,7 @@ export {
 } from './addColumnFilters';
 export { addColumnOrder } from './addColumnOrder';
 export { addExpandedRows } from './addExpandedRows';
+export { addGridLayout } from './addGridLayout';
 export { addGroupBy } from './addGroupBy';
 export { addHiddenColumns } from './addHiddenColumns';
 export { addPagination } from './addPagination';

src/routes/alt-layouts.svelte

@@ -15,6 +15,7 @@
 		addSubRows,
 		addGroupBy,
 		addSelectedRows,
+		addGridLayout,
 	} from '$lib/plugins';
 	import { mean, sum } from '$lib/utils/math';
 	import { getShuffled } from './_getShuffled';
@@ -54,6 +55,7 @@
 		page: addPagination({
 			initialPageSize: 20,
 		}),
+		layout: addGridLayout(),
 	});
 
 	const columns = table.createColumns([
@@ -203,8 +205,15 @@
 		}),
 	]);
 
-	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, visibleColumns, pluginStates } =
-		table.createViewModel(columns);
+	const {
+		headerRows,
+		pageRows,
+		tableAttrs,
+		tableHeadAttrs,
+		tableBodyAttrs,
+		visibleColumns,
+		pluginStates,
+	} = table.createViewModel(columns);
 
 	const { groupByIds } = pluginStates.group;
 	const { sortKeys } = pluginStates.sort;
@@ -231,7 +240,7 @@
 </div>
 
 <div class="table" {...$tableAttrs}>
-	<div class="thead">
+	<div class="thead" {...$tableHeadAttrs}>
 		{#each $headerRows as headerRow (headerRow.id)}
 			<Subscribe attrs={headerRow.attrs()} let:attrs>
 				<div class="tr" {...attrs}>
@@ -269,8 +278,12 @@
 				</div>
 			</Subscribe>
 		{/each}
-		<div class="tr">
-			<div class="th" colspan={$visibleColumns.length}>
+		<div class="tr" style:display="contents">
+			<div
+				class="th"
+				colspan={$visibleColumns.length}
+				style:grid-column="1 / span {$visibleColumns.length}"
+			>
 				<input type="text" bind:value={$filterValue} placeholder="Search all data..." />
 			</div>
 		</div>