Merge pull request #23 from bryanmylee/plugins/addResizeColumns

`addResizedColumns`
bryanmylee · May 26, 2022 · c20abdb · c20abdb
2 parents e6a71d1 + 89db34f
commit c20abdb
Show file tree

Hide file tree

Showing 19 changed files with 992 additions and 155 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ Easily extend Svelte Headless Table with complex **sorting**, **filtering**, **g
 - [x] [addGroupBy](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-group-by)
 - [x] [addExpandedRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-expanded-rows)
 - [x] [addSelectedRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-selected-rows)
-- [ ] addResizeColumns
+- [x] [addResizedColumns](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-resized-columns)
 - [ ] addEditable
 - [ ] addRowLabel
 
@@ -66,55 +66,55 @@ Svelte Headless Table comes with a stable plugin system that allows you to trans
 
 ```svelte
 <script>
-  const data = readable([
-    { name: 'Ada Lovelace', age: 21 },
-    { name: 'Barbara Liskov', age: 52 },
-    { name: 'Richard Hamming', age: 38 },
-  ]);
-
-  const table = createTable(data);
-
-  const columns = table.createColumns([
-    table.column({
-      header: 'Name',
-      accessor: 'name',
-    }),
-    table.column({
-      header: 'Age',
-      accessor: 'age',
-    }),
-  ]);
-
-  const { headerRows, rows } = table.createViewModel(columns);
+	const data = readable([
+		{ name: 'Ada Lovelace', age: 21 },
+		{ name: 'Barbara Liskov', age: 52 },
+		{ name: 'Richard Hamming', age: 38 },
+	]);
+
+	const table = createTable(data);
+
+	const columns = table.createColumns([
+		table.column({
+			header: 'Name',
+			accessor: 'name',
+		}),
+		table.column({
+			header: 'Age',
+			accessor: 'age',
+		}),
+	]);
+
+	const { headerRows, rows } = table.createViewModel(columns);
 </script>
 
 <table>
-  <thead>
-    {#each $headerRows as headerRow (headerRow.id)}
-      <tr>
-        {#each headerRow.cells as cell (cell.id)}
-          <Subscribe attrs={cell.attrs()} let:attrs>
-            <th {...attrs}>
-              <Render of={cell.render()} />
-            </th>
-          </Subscribe>
-        {/each}
-      </tr>
-    {/each}
-  </thead>
-  <tbody>
-    {#each $rows as row (row.id)}
-      <tr>
-        {#each row.cells as cell (cell.id)}
-          <Subscribe attrs={cell.attrs()} let:attrs>
-            <td {...attrs}>
-              <Render of={cell.render()} />
-            </td>
-          </Subscribe>
-        {/each}
-      </tr>
-    {/each}
-  </tbody>
+	<thead>
+		{#each $headerRows as headerRow (headerRow.id)}
+			<tr>
+				{#each headerRow.cells as cell (cell.id)}
+					<Subscribe attrs={cell.attrs()} let:attrs>
+						<th {...attrs}>
+							<Render of={cell.render()} />
+						</th>
+					</Subscribe>
+				{/each}
+			</tr>
+		{/each}
+	</thead>
+	<tbody>
+		{#each $rows as row (row.id)}
+			<tr>
+				{#each row.cells as cell (cell.id)}
+					<Subscribe attrs={cell.attrs()} let:attrs>
+						<td {...attrs}>
+							<Render of={cell.render()} />
+						</td>
+					</Subscribe>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
 </table>
 ```
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-headless-table",
-	"version": "0.8.3",
+	"version": "0.9.0",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",

diff --git a/src/lib/bodyCells.ts b/src/lib/bodyCells.ts
@@ -12,10 +12,9 @@ export type BodyCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export type BodyCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<
-	string,
-	never
->;
+export type BodyCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+	role: 'cell';
+};
 
 export abstract class BodyCell<
 	Item,
@@ -30,14 +29,21 @@ export abstract class BodyCell<
 
 	abstract render(): RenderConfig;
 
-	abstract attrs(): Readable<BodyCellAttributes<Item, Plugins>>;
+	attrs(): Readable<BodyCellAttributes<Item, Plugins>> {
+		return derived(super.attrs(), ($baseAttrs) => {
+			return {
+				...$baseAttrs,
+				role: 'cell' as const,
+			};
+		});
+	}
 
 	abstract clone(): BodyCell<Item, Plugins>;
 
 	rowColId(): string {
 		return `${this.row.id}:${this.column.id}`;
 	}
-	
+
 	dataRowColId(): string | undefined {
 		if (!(this.row instanceof DataBodyRow)) {
 			return undefined;
@@ -85,12 +91,6 @@ export class DataBodyCell<
 		return this.label({ column: this.column, row: this.row, value: this.value }, this.state);
 	}
 
-	attrs(): Readable<DataBodyCellAttributes<Item, Plugins>> {
-		return derived([], () => {
-			return {};
-		});
-	}
-
 	clone(): DataBodyCell<Item, Plugins> {
 		const clonedCell = new DataBodyCell({
 			row: this.row,
@@ -129,12 +129,6 @@ export class DisplayBodyCell<Item, Plugins extends AnyPlugins = AnyPlugins> exte
 		return this.label({ column: this.column, row: this.row }, this.state);
 	}
 
-	attrs() {
-		return derived([], () => {
-			return {};
-		});
-	}
-
 	clone(): DisplayBodyCell<Item, Plugins> {
 		const clonedCell = new DisplayBodyCell({
 			row: this.row,

diff --git a/src/lib/bodyRows.getSubRows.test.ts b/src/lib/bodyRows.getSubRows.test.ts
@@ -96,7 +96,9 @@ it('derives the correct cellForId when parent has hidden cells', () => {
 	const columnedParentRow = getColumnedBodyRows([parentRow], ['firstName'])[0];
 	const actual = getSubRows(data, columnedParentRow);
 
-	const expected = getColumnedBodyRows(getBodyRows(data, dataColumns), ['firstName']) as DataBodyRow<User>[];
+	const expected = getColumnedBodyRows(getBodyRows(data, dataColumns), [
+		'firstName',
+	]) as DataBodyRow<User>[];
 
 	[0, 1].forEach((rowIdx) => {
 		const row = actual[rowIdx];

diff --git a/src/lib/bodyRows.ts b/src/lib/bodyRows.ts
@@ -14,10 +14,9 @@ export type BodyRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export type BodyRowAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<
-	string,
-	never
->;
+export type BodyRowAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+	role: 'row';
+};
 
 export abstract class BodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<
 	Item,
@@ -43,8 +42,11 @@ export abstract class BodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> ext
 	}
 
 	attrs(): Readable<BodyRowAttributes<Item, Plugins>> {
-		return derived([], () => {
-			return {};
+		return derived(super.attrs(), ($baseAttrs) => {
+			return {
+				...$baseAttrs,
+				role: 'row' as const,
+			};
 		});
 	}
 

diff --git a/src/lib/createViewModel.ts b/src/lib/createViewModel.ts
@@ -12,8 +12,20 @@ import type {
 } from './types/TablePlugin';
 import { nonUndefined } from './utils/filter';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type TableAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+	role: 'table';
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type TableBodyAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+	role: 'rowgroup';
+};
+
 export interface TableViewModel<Item, Plugins extends AnyPlugins = AnyPlugins> {
 	flatColumns: FlatColumn<Item, Plugins>[];
+	tableAttrs: Readable<TableAttributes<Item, Plugins>>;
+	tableBodyAttrs: Readable<TableBodyAttributes<Item, Plugins>>;
 	visibleColumns: Readable<FlatColumn<Item, Plugins>[]>;
 	headerRows: Readable<HeaderRow<Item, Plugins>[]>;
 	originalRows: Readable<BodyRow<Item, Plugins>[]>;
@@ -52,9 +64,17 @@ export const createViewModel = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 	const _headerRows = writable<HeaderRow<Item, Plugins>[]>();
 	const _rows = writable<BodyRow<Item, Plugins>[]>([]);
 	const _pageRows = writable<BodyRow<Item, Plugins>[]>([]);
+	const tableAttrs = readable({
+		role: 'table' as const,
+	});
+	const tableBodyAttrs = readable({
+		role: 'rowgroup' as const,
+	});
 	const pluginInitTableState: PluginInitTableState<Item, Plugins> = {
 		data,
 		columns,
+		tableAttrs,
+		tableBodyAttrs,
 		flatColumns: $flatColumns,
 		visibleColumns: _visibleColumns,
 		headerRows: _headerRows,
@@ -90,6 +110,8 @@ export const createViewModel = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 	const tableState: TableState<Item, Plugins> = {
 		data,
 		columns,
+		tableAttrs,
+		tableBodyAttrs,
 		flatColumns: $flatColumns,
 		visibleColumns: _visibleColumns,
 		headerRows: _headerRows,
@@ -224,6 +246,8 @@ export const createViewModel = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 	});
 
 	return {
+		tableAttrs,
+		tableBodyAttrs,
 		flatColumns: $flatColumns,
 		visibleColumns: injectedColumns,
 		headerRows,

diff --git a/src/lib/headerCells.ts b/src/lib/headerCells.ts
@@ -14,6 +14,7 @@ export type HeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type HeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+	role: 'columnheader';
 	colspan: number;
 };
 export abstract class HeaderCell<
@@ -39,8 +40,10 @@ export abstract class HeaderCell<
 	}
 
 	attrs() {
-		return derived([], () => {
+		return derived(super.attrs(), ($baseAttrs) => {
 			return {
+				...$baseAttrs,
+				role: 'columnheader' as const,
 				colspan: this.colspan,
 			};
 		});
@@ -107,23 +110,23 @@ export class DataHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> exten
 	}
 }
 
-export type DisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
+export type FlatDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
 	FlatHeaderCellInit<Item, Plugins>,
 	'label'
 > & {
 	label?: HeaderLabel<Item>;
 };
 
-export class DisplayHeaderCell<
+export class FlatDisplayHeaderCell<
 	Item,
 	Plugins extends AnyPlugins = AnyPlugins
 > extends FlatHeaderCell<Item, Plugins> {
-	constructor({ id, label = NBSP }: DisplayHeaderCellInit<Item, Plugins>) {
+	constructor({ id, label = NBSP }: FlatDisplayHeaderCellInit<Item, Plugins>) {
 		super({ id, label });
 	}
 
-	clone(): DisplayHeaderCell<Item, Plugins> {
-		return new DisplayHeaderCell({
+	clone(): FlatDisplayHeaderCell<Item, Plugins> {
+		return new FlatDisplayHeaderCell({
 			id: this.id,
 			label: this.label,
 		});
@@ -171,3 +174,34 @@ export class GroupHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> exte
 		});
 	}
 }
+
+export type GroupDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
+	GroupHeaderCellInit<Item, Plugins>,
+	'label' | 'colspan'
+> & {
+	label?: HeaderLabel<Item>;
+	colspan?: number;
+};
+
+export class GroupDisplayHeaderCell<
+	Item,
+	Plugins extends AnyPlugins = AnyPlugins
+> extends GroupHeaderCell<Item, Plugins> {
+	constructor({
+		label = NBSP,
+		colspan = 1,
+		ids,
+		allIds,
+	}: GroupDisplayHeaderCellInit<Item, Plugins>) {
+		super({ label, colspan, ids, allIds });
+	}
+
+	clone(): GroupDisplayHeaderCell<Item, Plugins> {
+		return new GroupDisplayHeaderCell({
+			label: this.label,
+			colspan: this.colspan,
+			ids: this.ids,
+			allIds: this.allIds,
+		});
+	}
+}