I am using @tanstack/react-table React Table in a Next.js application. Want to show a list of columns to select from to display in the display
However, the columns displayed are the column IDs instead of the titles.
The way the column is being rendered in the table is
{
accessorKey: "session.device_family",
header: ({column}) => (
<DataTableColumnHeader column={column} title="Device"/>
),
},
{
accessorKey: "session.device_type_display",
header: ({column}) => (
<DataTableColumnHeader column={column} title="Device Type"/>
),
cell: ({row}) => {
const deviceType = row.original.session.device_type as string;
const DeviceIcon = deviceTypeIcons[deviceType] || MonitorX;
return (
<div className="flex items-center gap-2">
<DeviceIcon className="h-4 w-4" />
<span>{row.original.session.device_type_display}</span>
</div>
)
}
},
where session.device_family is the field in the JSON object, which is showing in the View dropdown list as Session_device_family.
Instead, I want to show the title="Device" in the list of columns.
Using the below code to render the columns list
export function DataTableViewOptions<TData>({
table,
}: DataTableViewOptionsProps<TData>) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className="ml-auto hidden h-8 lg:flex"
>
<Settings2 />
View
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="">
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
<DropdownMenuSeparator />
{table
.getAllColumns()
.filter(
(column) =>
typeof column.accessorFn !== "undefined" && column.getCanHide()
)
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
>
{column.id}
</DropdownMenuCheckboxItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
)
}
How can I show title like Device Type, Browser, Country in the Toggle Columns instead of Session_device_type_display, Session_browser_family, Session_country_name, etc., respectively.
