Column Size/Width not working

[livevsonline]

Hi im having trouble controlling the width of columns?

I put the size/width of the first columns to 5, min-width to 5 and max-width to 5

But for some reason it stretches, i have in general trouble trying to make small columns for stuff like icons etc

The ColumnDefinition looks like this:

import {DotColumn} from "../../../types/Table";
import {NumberRangeType} from "../../../types";
import {ColumnDef} from "@tanstack/table-core";
import {oColorDot, SpyDot} from "../../SpyDot";

function Dot<DEFINITION>(oProps: DotColumn): ColumnDef<DEFINITION> {
	function getBullit(iStatus: NumberRangeType<5>): keyof typeof oColorDot {
		return {
			0: 'black',
			1: 'red',
			2: 'yellow',
			3: 'blue',
			4: 'green'
		}[iStatus] as keyof typeof oColorDot;
	}

	return {
		accessorKey: oProps.accessor,
		size: oProps.size,
		minSize: oProps.minSize,
		maxSize: oProps.maxSize,
		header: () => {
			return (
				<div className={'whitespace-nowrap text-sm text-start'}>
					?
				</div>
			)
		},
		cell: cell => {
			return (
				<SpyDot
					strColor={getBullit((cell.cell.row.original as any)[oProps.accessor])}
					oAnchorProps={{
						href: oProps.href,
					}}
				/>
			);
		},
		footer: () => oProps.footer,
	}
}

export default Dot;

For some reason it stretches kinda far from the Questionmark to the Customer column, that it way too much width i would like the column to have a width that kinda fit to the content or a fixed much smaller width.

If i put in a large number for the size it works by being wider... but getting it small is kinda not working

[livevsonline]

I realised it is because i have a footer...

Is it possible to make the footer not affect the tbody widths? currently i made the footer content display absolute and fixed it that way :)

[piecyk]

@livevsonline you can use paddingEnd, that will add space on the bottom of the list for the footer, also fyi if it's sticky and you will scroll to index then set also scrollPaddingEnd