Merge pull request #118 from risalfajar/optional-id

Make `header` as column's alternative id

Author: bryanmylee

docs/src/routes/docs/[...2]api/[...3]create-columns.md

@@ -83,7 +83,7 @@ const columns = table.createColumns([
 
 Defines the id of the data column. **Duplicate ids are not allowed** on a single table.
 
-_Defaults to the value of `accessor` if a string accessor is passed_. Required if a function accessor is passed.
+_Defaults to the value of `accessor` if a string accessor is passed_. If a function accessor is passed, defaults to the value of `header` instead.
 
 #### `columnDef.header: RenderConfig | ((headerCell, state) => RenderConfig)`
 

package-lock.json

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

package.json

@@ -50,7 +50,7 @@ export type FlatColumnInit<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	Id extends string = any
 > = Omit<ColumnInit<Item, Plugins>, 'height'> & {
-	id: Id;
+	id?: Id;
 };
 
 export class FlatColumn<
@@ -65,7 +65,7 @@ export class FlatColumn<
 	id: Id;
 	constructor({ header, footer, plugins, id }: FlatColumnInit<Item, Plugins>) {
 		super({ header, footer, plugins, height: 1 });
-		this.id = id;
+		this.id = id ?? String(header);
 	}
 }
 
@@ -96,7 +96,7 @@ export type DataColumnInitKey<Item, Id extends keyof Item> = {
 
 export type DataColumnInitIdAndKey<Item, Id extends string, Key extends keyof Item> = {
 	accessor: Key;
-	id: Id;
+	id?: Id;
 };
 
 export type DataColumnInitFnAndId<Item, Id extends string, Value> = {
@@ -133,10 +133,10 @@ export class DataColumn<
 		} else {
 			this.accessorKey = accessor;
 		}
-		if (id === undefined && this.accessorKey === undefined) {
-			throw new Error('A column id or string accessor is required');
+		if (id === undefined && this.accessorKey === undefined && header === undefined) {
+			throw new Error('A column id, string accessor, or header is required');
 		}
-		this.id = (id ?? String(this.accessorKey)) as Id;
+		this.id = (id ?? this.accessorKey ? String(this.accessorKey) : String(header)) as Id;
 	}
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

src/lib/columns.ts

@@ -43,3 +43,41 @@ it('throws if two columns have the same id', () => {
 		]);
 	}).toThrowError('Duplicate column ids not allowed: "firstName"');
 });
+
+it('using headers as id, passes if no duplicate headers', () => {
+	expect(() => {
+		table.createColumns([
+			table.column({
+				header: 'First Name',
+				accessor: (item) => item.firstName
+			}),
+			table.column({
+				header: 'Last Name',
+				accessor: (item) => item.lastName
+			}),
+			table.display({
+				header: 'Actions',
+				cell: () => ''
+			}),
+		])
+	}).not.toThrow()
+});
+
+it('using headers as id, throws if two columns have the same headers', () => {
+	expect(() => {
+		table.createColumns([
+			table.column({
+				header: 'First Name',
+				accessor: (item) => item.firstName
+			}),
+			table.column({
+				header: 'Last Name',
+				accessor: (item) => item.lastName
+			}),
+			table.display({
+				header: 'First Name',
+				cell: () => ''
+			}),
+		])
+	}).toThrowError('Duplicate column ids not allowed: "First Name"')
+});