Column Definition

Column definitions specify what data to display and how to organize your table. This guide covers the essential properties and configuration options.

Basic Requirements

Every column definition requires two properties:

accessor: The property name from your data (e.g., 'name' or 'email')
header: The text to display in the column header (e.g., 'Full Name' or 'Email Address')

			const columns = [
	{ accessor: 'name', header: 'Name' },
	{ accessor: 'email', header: 'Email' }
];

Creating Column Definitions

Here’s how to set up columns for your data:

			<script lang="ts">
	import { reactiveTable } from 'svelte-reactive-table';

	const data = [
		{ id: 1, name: 'John Doe', age: 30, email: 'john@example.com' },
		{ id: 2, name: 'Jane Smith', age: 25, email: 'jane@example.com' }
	];

	const columns = [
		{ accessor: 'id', header: 'ID' },
		{ accessor: 'name', header: 'Name' },
		{ accessor: 'age', header: 'Age' },
		{ accessor: 'email', header: 'Email' }
	];

	const table = reactiveTable(data, columns);
</script>

Each column maps directly to a property in your data objects. The accessor specifies which data to display, and the header defines what users see in the column header.

Row Identification

Mark one column as the row identifier for optimal performance:

			const columns = [
  { accessor: 'id', header: 'ID', isIdentifier: true },
  { accessor: 'name', header: 'Name' },
  // ...other columns
];

Why does this matter? The identifier helps the table track individual rows reliably, especially when data changes. Think of it like a unique ID for each row.

If you don’t specify an identifier, the first column becomes the identifier by default - but it’s better to be explicit!

Controlling Initial Visibility

Want some columns hidden when the table first loads? Use the column visibility plugin:

			import { reactiveTable, reactiveColumnVisibility } from 'svelte-reactive-table';

const columns = [
  { accessor: 'id', header: 'ID', isIdentifier: true },
  { accessor: 'name', header: 'Name' },
  { accessor: 'age', header: 'Age' },
  { accessor: 'email', header: 'Email' }
];

const table = reactiveTable(data, columns).use(
  reactiveColumnVisibility({
    hiddenColumns: ['email'] // Initially hide the email column
  })
);

See the Column Visibility section for more details on managing column visibility.

Dynamic Column Changes

You can update column definitions at any time:

			<script>
	function updateColumns() {
		table.columnDefs = [
			{ accessor: 'id', header: 'User ID', isIdentifier: true },
			{ accessor: 'name', header: 'Full Name' },
			{ accessor: 'age', header: 'Years' }
			// Email column removed
		];
	}
</script>

TypeScript Support

When using TypeScript, columns are type-checked against your data:

			type User = {
	id: number;
	name: string;
	age: number;
	email: string;
};

// Type error if you try to access a non-existent property
const columns: ColumnDef<User>[] = [
	{ accessor: 'id', header: 'ID', isIdentifier: true },
	{ accessor: 'name', header: 'Name' },
	{ accessor: 'age', header: 'Age' },
	{ accessor: 'email', header: 'Email' },
	{ accessor: 'phone', header: 'Phone' } // Error: property doesn't exist
];

Working with Nested Data

When working with nested data, you’ll need to flatten it for the table:

			<script>
	// Nested data structure
	const nestedData = [
		{
			id: 1,
			name: 'John Doe',
			contact: {
				email: 'john@example.com',
				phone: '555-1234'
			}
		}
	];

	// Flatten for the table
	const flattenedData = nestedData.map((item) => ({
		id: item.id,
		name: item.name,
		email: item.contact.email,
		phone: item.contact.phone
	}));

	const columns = [
		{ accessor: 'id', header: 'ID', isIdentifier: true },
		{ accessor: 'name', header: 'Name' },
		{ accessor: 'email', header: 'Email' },
		{ accessor: 'phone', header: 'Phone' }
	];

	const table = reactiveTable(flattenedData, columns);
</script>

Column Information

The table provides properties for working with columns:

			<script>
	// All columns with their full definitions
	const allColumns = table.allColumns;

	// Only visible columns
	const visibleColumns = table.columns;

	// Column headers (from visible columns only)
	const headers = table.headers;
</script>

With proper column definitions, you have full control over what data is displayed and how it’s organized in your table.