Merge pull request #50 from bryanmylee:label-with-cells

Always pass table component into label

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-headless-table",
 	"description": "Unopinionated and extensible data tables for Svelte",
-	"version": "0.13.4",
+	"version": "0.14.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

src/lib/bodyCells.HeaderCell.render.test.ts

@@ -39,7 +39,7 @@ const state = {
 it('renders dynamic label with state', () => {
 	const actual = new TestHeaderCell({
 		id: '0',
-		label: ({ columns }) => `${columns.length} columns`,
+		label: (_, { columns }) => `${columns.length} columns`,
 		colspan: 1,
 		colstart: 1,
 	});
@@ -53,7 +53,7 @@ it('renders dynamic label with state', () => {
 it('throws if rendering dynamically without state', () => {
 	const actual = new TestHeaderCell({
 		id: '0',
-		label: ({ columns }) => `${columns.length} columns`,
+		label: (_, { columns }) => `${columns.length} columns`,
 		colspan: 1,
 		colstart: 1,
 	});

src/lib/bodyCells.ts

@@ -101,7 +101,7 @@ export class DataBodyCell<
 		if (this.state === undefined) {
 			throw new Error('Missing `state` reference');
 		}
-		return this.label({ column: this.column, row: this.row, value: this.value }, this.state);
+		return this.label(this, this.state);
 	}
 
 	clone(): DataBodyCell<Item, Plugins> {
@@ -142,7 +142,7 @@ export class DisplayBodyCell<Item, Plugins extends AnyPlugins = AnyPlugins> exte
 		if (this.state === undefined) {
 			throw new Error('Missing `state` reference');
 		}
-		return this.label({ column: this.column, row: this.row }, this.state);
+		return this.label(this, this.state);
 	}
 
 	clone(): DisplayBodyCell<Item, Plugins> {

src/lib/headerCells.ts

@@ -5,10 +5,9 @@ import type { HeaderLabel } from './types/Label';
 import type { AnyPlugins } from './types/TablePlugin';
 import type { RenderConfig } from './render';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type HeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
 	id: string;
-	label: HeaderLabel<Item>;
+	label: HeaderLabel<Item, Plugins>;
 	colspan: number;
 	colstart: number;
 };
@@ -23,10 +22,10 @@ export abstract class HeaderCell<
 	Item,
 	Plugins extends AnyPlugins = AnyPlugins
 > extends TableComponent<Item, Plugins, 'thead.tr.th'> {
-	label: HeaderLabel<Item>;
+	label: HeaderLabel<Item, Plugins>;
 	colspan: number;
 	colstart: number;
-	constructor({ id, label, colspan, colstart }: HeaderCellInit<Item>) {
+	constructor({ id, label, colspan, colstart }: HeaderCellInit<Item, Plugins>) {
 		super({ id });
 		this.label = label;
 		this.colspan = colspan;
@@ -39,7 +38,7 @@ export abstract class HeaderCell<
 				throw new Error('Missing `state` reference');
 			}
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			return this.label(this.state as any);
+			return this.label(this, this.state as any);
 		}
 		return this.label;
 	}
@@ -152,7 +151,7 @@ export type FlatDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlug
 	FlatHeaderCellInit<Item, Plugins>,
 	'label'
 > & {
-	label?: HeaderLabel<Item>;
+	label?: HeaderLabel<Item, Plugins>;
 };
 
 export class FlatDisplayHeaderCell<
@@ -225,7 +224,7 @@ export type GroupDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlu
 	GroupHeaderCellInit<Item, Plugins>,
 	'label' | 'colspan'
 > & {
-	label?: HeaderLabel<Item>;
+	label?: HeaderLabel<Item, Plugins>;
 	colspan?: number;
 };
 

src/lib/types/Label.ts

@@ -1,37 +1,22 @@
-import type { BodyRow } from '$lib/bodyRows';
-import type { DataColumn, FlatColumn } from '$lib/columns';
+import type { DataBodyCell, DisplayBodyCell } from '$lib/bodyCells';
 import type { TableState } from '$lib/createViewModel';
+import type { HeaderCell } from '$lib/headerCells';
 import type { RenderConfig } from '$lib/render';
 import type { AnyPlugins } from './TablePlugin';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DataLabel<Item, Plugins extends AnyPlugins = AnyPlugins, Value = any> = (
-	props: DataLabelProps<Item, Plugins, Value>,
+	cell: DataBodyCell<Item, Plugins, Value>,
 	state: TableState<Item, Plugins>
 ) => RenderConfig;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-export type DataLabelProps<Item, Plugins extends AnyPlugins = AnyPlugins, Value = any> = {
-	column: DataColumn<Item, Plugins>;
-	row: BodyRow<Item, Plugins>;
-	// Value type does not infer correctly in Svelte
-	// value: Value;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	value: any;
-};
-
 export type DisplayLabel<Item, Plugins extends AnyPlugins = AnyPlugins> = (
-	props: DisplayLabelProps<Item, Plugins>,
+	cell: DisplayBodyCell<Item, Plugins>,
 	state: TableState<Item, Plugins>
 ) => RenderConfig;
 
-export type DisplayLabelProps<Item, Plugins extends AnyPlugins = AnyPlugins> = {
-	column: FlatColumn<Item, Plugins>;
-	row: BodyRow<Item, Plugins>;
-};
-
 // If the function type is removed from the union, generics will not be
 // inferred for subtypes.
 export type HeaderLabel<Item, Plugins extends AnyPlugins = AnyPlugins> =
 	| RenderConfig
-	| ((state: TableState<Item, Plugins>) => RenderConfig);
+	| ((cell: HeaderCell<Item, Plugins>, state: TableState<Item, Plugins>) => RenderConfig);

src/routes/index.svelte

@@ -69,7 +69,7 @@
 	const columns = table.createColumns([
 		table.display({
 			id: 'selected',
-			header: ({ pluginStates }) => {
+			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected, somePageRowsSelected } = pluginStates.select;
 				return createRender(SelectIndicator, {
 					isSelected: allPageRowsSelected,
@@ -134,14 +134,19 @@
 			},
 		}),
 		table.group({
-			header: ({ rows, pageRows }) =>
+			header: (_, { rows, pageRows }) =>
 				derived(
 					[rows, pageRows],
 					([_rows, _pageRows]) => `Name (${_rows.length} records, ${_pageRows.length} in page)`
 				),
 			columns: [
 				table.column({
-					header: createRender(Italic, { text: 'First Name' }),
+					header: (cell) => {
+						return createRender(
+							Italic,
+							derived(cell.props(), (_props) => ({ text: `First Name ${_props.sort.order}` }))
+						);
+					},
 					accessor: 'firstName',
 					plugins: {
 						group: {
@@ -171,7 +176,7 @@
 			],
 		}),
 		table.group({
-			header: ({ rows }) =>
+			header: (_, { rows }) =>
 				createRender(
 					Italic,
 					derived(rows, (_rows) => ({ text: `Info (${_rows.length} samples)` }))