50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import type { ColumnDef } from '@tanstack/vue-table'
|
|
|
|
import { h } from 'vue'
|
|
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
|
|
import RadioCell from './radio-cell.vue'
|
|
|
|
const FIXED_WIDTH_COLUMN = {
|
|
size: 32,
|
|
minSize: 32,
|
|
maxSize: 32,
|
|
enableResizing: false,
|
|
} as const
|
|
|
|
export const SelectColumn: ColumnDef<any> = {
|
|
id: 'select',
|
|
...FIXED_WIDTH_COLUMN,
|
|
header: ({ table }) => h(Checkbox, {
|
|
'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
|
|
'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),
|
|
'ariaLabel': 'Select all',
|
|
}),
|
|
cell: ({ row }) => h(Checkbox, {
|
|
'modelValue': row.getIsSelected(),
|
|
'onUpdate:modelValue': value => row.toggleSelected(!!value),
|
|
'ariaLabel': 'Select row',
|
|
}),
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
}
|
|
|
|
export const RadioSelectColumn: ColumnDef<any> = {
|
|
id: 'radio-select',
|
|
...FIXED_WIDTH_COLUMN,
|
|
header: () => null,
|
|
cell: ({ row, table }) => h(RadioCell, {
|
|
checked: row.getIsSelected(),
|
|
onClick: (event: MouseEvent) => {
|
|
event.stopPropagation()
|
|
// cancel selection of all rows
|
|
table.toggleAllRowsSelected(false)
|
|
// select the current row
|
|
row.toggleSelected(true)
|
|
},
|
|
}),
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
}
|