typescript reusable table, problem with columns

[bnn1]

Hi. I've created a data grid component, it has columns prop of this type:

type Props<T> = {
	data: T[];
	columns: Column<T, AnyPlugins>[];
	plugins?: AnyPlugins;
};
export let columns: Props<T>["columns"]

I tried to use it but noticed that Column type doesn't have many properties that table.column accepts. When I create a columns like that:

import { type Column } from 'svelte-headless-table';
type Data = {
	id: number;
	value: number;
	date: Date;
};
const columns: Column<Data>[] = [
	{ accessor: 'value', header: 'Value' }, // Error: Object literal may only specify known properties, and 'accessor' does not exist in type 'Column<Data, AnyPlugins>'
	{
		accessor: 'date', // Error: Object literal may only specify known properties, and 'accessor' does not exist in type 'Column<Data, AnyPlugins>'
		header: 'Date',
		cell: ({ value }: { value: Date }) => value.toLocaleString()
	}
] as const;

I get TS error near accessor property that tells me "Object literal may only specify known properties, and 'accessor' does not exist in type 'Column<Data, AnyPlugins>'"

I tried to use another type provided by the library -- DataColumnInit:

const columns: DataColumnInit<Data, AnyPlugins, string, Data[keyof Data]>[] = [
	{ accessor: 'value', header: 'Value' },
	{
		accessor: 'date',
		header: 'Date',
		cell: ({ value }) => value.toLocaleString() // value: number | Date
	}
] as const;

, but I encountered another set of setbacks, like cell function not knowing the type of the value.

Does anyone have an example of a reusable datagrid component in typescript? Or an advice how to achieve reusability?

[bryanmylee]

The main issue is that Column<Data> is a wide type that spans over all possible value selections of Data. It's the main reason why I designed the library with table.createColumns, since table at that point of time had the Data type already specified so you didn't have to specify explicit types and therefore over-expand the type.

You need each column to be some subtype of Column<Data>, but what you did causes each column to be the widest possible Column<Data>.

const columns: Column<Data>[] = [
	{ accessor: 'value', header: 'Value' }, // this is a general `Column<Data>`
];

Fortunately for you, TypeScript 4.9 came up with the new satisfies operator after I released this library. This should allow you to request that a value "fits" into the type Column<Data> without losing the subtype for each column.

const columns = [
	{ accessor: 'value', header: 'Value' },
	{
		accessor: 'date',
		header: 'Date',
		cell: ({ value }: { value: Date }) => value.toLocaleString()
	}
] satisfies Column<Data>[];

[bnn1]

I'm still getting the Object literal may only specify known properties, and 'accessor' does not exist in type 'Column<Data, AnyPlugins>'.ts(2353) error on the accessor property.

[bnn1]

The closes I could get to somewhat OK code that doesn't have TS errors is this:

// reusable datagrid component
type Props<T> = {
	data: T[];
	columns: DataColumnInit<T, AnyPlugins, string, T[keyof T]>[];
	plugins?: AnyPlugins;
};
export let columns: Props<T>['columns'];
// another component consumes datagrid component
type Data = {
	id: number;
	value: number;
	date: Date;
};

const data: Data[] = Array.from({ length: 100 }, (_, id) => ({
	id,
	value: Math.floor(Math.random() * 1000) - 500,
	date: new Date(new Date().getTime() + Math.floor(Math.random() * 1000000000) - 1000000000 / 2)
})).toSorted((a, b) => b.date.getTime() - a.date.getTime());

const columns: DataColumnInit<Data, AnyPlugins, string, Data[keyof Data]>[] = [
	{ accessor: 'value', header: 'Value' },
	{
		accessor: 'date',
		header: 'Date',
		cell: ({ value }) => value.toLocaleString()
	}
] as const;

But with this approach cell's value is a union of all possible row value types. And I'm not sure it won't cause any unexpected problems with other headless table features

[bryanmylee]

Sorry yes, the Column type isn't for defining columns. Either way, I think you need to read my response again to understand why the value type is a union of all possible value types.

const columns = [
	{ accessor: 'value', header: 'Value' },
	{
		accessor: 'date',
		header: 'Date',
		cell: ({ value }: { value: Date }) => value.toLocaleString()
	}
] satisfies DataColumnInit<Data>[];

[bnn1]

I followed your suggestion but still the same error. I created a quick reproduction, please have a look: https://stackblitz.com/edit/vitejs-vite-uxnbmk?file=src%2Fcounter.ts