Column Visibility Type issue
Hi all,
I have this table which I can set the column visibility. However, I can't fix the
ColumnDef type for this specific table. I was wondering if you can help me here:3 Replies
xenial-blackOP•2y ago
const defaultColumns = useMemo<ColumnDef<VehicleType>[]>(
() => [
{
id: 'select',
enableHiding: false,
header: ({ table }) => (
<IndetermineCheckbox
{...{
checked: table.getIsAllRowsSelected(),
indeterminate: table.getIsSomeRowsExpanded(),
onChange: table.getToggleAllRowsSelectedHandler(),
}}
/>
),
cell: ({ row }) => (
<IndetermineCheckbox
{...{
checked: row.getIsSelected(),
disabled: !row.getCanSelect(),
indeterminate: row.getIsSomeSelected(),
onChange: row.getToggleSelectedHandler(),
}}
/>
),
},
{
id: 'name_description',
accessorKey: 'name',
header: 'Name/Description',
},
...
],
[],
);
const defaultColumns = useMemo<ColumnDef<VehicleType>[]>(
() => [
{
id: 'select',
enableHiding: false,
header: ({ table }) => (
<IndetermineCheckbox
{...{
checked: table.getIsAllRowsSelected(),
indeterminate: table.getIsSomeRowsExpanded(),
onChange: table.getToggleAllRowsSelectedHandler(),
}}
/>
),
cell: ({ row }) => (
<IndetermineCheckbox
{...{
checked: row.getIsSelected(),
disabled: !row.getCanSelect(),
indeterminate: row.getIsSomeSelected(),
onChange: row.getToggleSelectedHandler(),
}}
/>
),
},
{
id: 'name_description',
accessorKey: 'name',
header: 'Name/Description',
},
...
],
[],
);
const table = useReactTable({
data: isSuccess && vehicles ? vehicles : data,
columns: defaultColumns,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onRowSelectionChange: setRowSelection,
initialState: {
pagination: {
pageSize: 13,
pageIndex: 0,
},
},
state: {
rowSelection,
columnVisibility,
},
});
const table = useReactTable({
data: isSuccess && vehicles ? vehicles : data,
columns: defaultColumns,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onRowSelectionChange: setRowSelection,
initialState: {
pagination: {
pageSize: 13,
pageIndex: 0,
},
},
state: {
rowSelection,
columnVisibility,
},
});
Type 'ColumnDef<VehicleType>[]' is not assignable to type 'ColumnDef<VehicleType, any>[]'. Type 'ColumnDef<VehicleType>' is not assignable to type 'ColumnDef<VehicleType, any>'. Type 'ColumnDefBase<VehicleType, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<VehicleType, any>'. Type 'ColumnDefBase<VehicleType, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<VehicleType, any> & IdIdentifier<VehicleType, any>'. Property 'accessorFn' is missing in type 'ColumnDefBase<VehicleType, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<VehicleType, any>'.
Type 'ColumnDef<VehicleType>[]' is not assignable to type 'ColumnDef<VehicleType, any>[]'. Type 'ColumnDef<VehicleType>' is not assignable to type 'ColumnDef<VehicleType, any>'. Type 'ColumnDefBase<VehicleType, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<VehicleType, any>'. Type 'ColumnDefBase<VehicleType, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<VehicleType, any> & IdIdentifier<VehicleType, any>'. Property 'accessorFn' is missing in type 'ColumnDefBase<VehicleType, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<VehicleType, any>'.
extended-salmon•2y ago
Your first column needs some sort of a accessor or display declaration I my first guess looking at your code
xenial-blackOP•2y ago
It's fixed with the createColumnHelper