Table header shifting
Hello, im making an expandable table that has a custom model. though everytime i expand the table headers shift. Trough testing i see that its to the custom expand component.
TableBody:
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<React.Fragment key={row.id}>
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
{row.getIsExpanded() && (
<TableRow>
<TableCell
colSpan={columns.length}
className={'bg-[#FBFAF9] p-6'}
>
<ExpandedRow row={row} />
</TableCell>
</TableRow>
)}
</React.Fragment>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
3 Replies
harsh-harlequinOP•16mo ago
Custom Expand:
import { type Row } from '@tanstack/table-core';
import LineChart from '../Highcharts/Linechart';
import { setOptions } from '../Highcharts/LinechartOptions';
import Link from 'next/link';
import { ExternalLink } from 'lucide-react';
import { Separator } from '@component/ui/separator';
import React from 'react';
export const ExpandedRow: React.FC<{ row: Row<Screener> }> = ({ row }) => {
return (
<React.Fragment>
<div className={'flex flex-col gap-2'}>
<h3>OM FONDEN</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
autem cupiditate dolores ea eos excepturi illum inventore maiores
molestias necessitatibus nihil quod reprehenderit saepe tempora ut,
vel voluptate voluptatibus.
</p>
<Link href={'/'} className={'flex items-center gap-2 text-primary'}>
{' '}
<ExternalLink color={'#005FA5'} />
Läs mer om fonden
</Link>
</div>
<Separator className="my-2" />
<div className={'grid grid-cols-3 gap-4'}>
<div id={row.id + 'chart'} className={'col-span-2'}>
<LineChart
options={setOptions([
{
name: row.getValue('name'),
data: [43, 48, 65, 81, 112, 142, 171, 165, 155, 161, 154],
color: '#083b61',
},
])}
/>
<Separator orientation="vertical" className={'ml-4'} />
</div>
<div className={'col-span-1'}>
<h3>FONDINFORMATION</h3>
<div>
<div className={'flex gap-2'}>
<div>Huvudkategori</div>
<div className={'mb-1 w-full border-b-2 border-dashed'}></div>
<div>Aktiefond</div>
</div>
</div>
</div>
</div>
</React.Fragment>
);
};
UPDATE:
so i noticed its due to the <p> tag being long. when it goes to the next row it shifts the columns.
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
autem cupiditate dolores ea eos excepturi illum inventore maiores
molestias necessitatibus nihil quod reprehenderit saepe tempora ut,
vel voluptate voluptatibus.
</p>
im unsure why this effects the columns, do i need fix widths or?
solid-orange•16mo ago
Try setting the table-layout to
fixed in css. it won't completely solve the problem but may remedy it a bit. if you want the columns to be truly one width, you will have to set each header with a static width.harsh-harlequinOP•16mo ago
Apperently if u have text that breaks to next row the div/p/span/etc need to have a max-width