Merge pull request #118 from risalfajar/optional-id

Make `header` as column's alternative id

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.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",

src/lib/columns.ts

@@ -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/createTable.createColumns.test.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"')
+});