Vue Data Grid with Filtering

type DataGridColumn = {
	key: string; // Stable column id. It can match a row property, or identify a display-only column such as actions.
	field?: string; // Row property to read when it differs from key.
	label?: string; // Header label.
	type?: 'text' | 'number' | 'date' | 'boolean' | 'select' | 'currency'; // Column data type. Drives sorting, formatting, and filter controls.
	width?: string | number; // CSS width for the column.
	align?: 'left' | 'center' | 'right'; // Cell alignment.
	component?: object | Function | string; // Vue component used to render cells in this column. Receives row, column, value, formatted, rowIndex, and rowKey props.
	resizable?: boolean; // Set false to disable drag resizing for this column.
	sortable?: boolean; // Set false to disable sorting.
	filterable?: boolean; // Set false to disable filtering for this column, hide the filter button, and omit the column from query filters.
	searchable?: boolean; // Set false to remove the column from global search.
	options?: Array<string | number | boolean | object>; // Select filter options. Objects may include label, value, and tone.
	currency?: string; // Currency code for currency columns.
	accessor?: Function; // Function that receives a row and returns the cell value.
	sortAccessor?: Function; // Function that receives a row and column and returns the value used for local sorting.
	format?: Function; // Function that receives value, row, and column and returns display text.
};