Help with CSS for resizing columns

edit: repro: https://stackblitz.com/edit/tanstack-table-7djbwc?file=src/main.tsx

Anyone mind taking a look

With this resize in SS #2 you can see the columns sizes are off. The internals are

 { actions: 1165, firstName: 0, nickName: 817 }

 { actions: 1165, firstName: 0, nickName: 817 }

but you can see firstName is not the 60px width.

Also when i add

style={{ width: table.getTotalSize() }}

style={{ width: table.getTotalSize() }}

my table doesn't take up w-full like it did before (i believe all the cols are at 120px while the "default" size is 150.

When I don't use getTotalSize(), the columns don't adjust (but the code does)

export function DataTable<TData, TValue>({
    columns,
    data,
    initialSearchParams,
}: DataTableProps<TData, TValue>) {

    const table = useReactTable({
        data,
        columns,
        filterFns: {
            fuzzy: fuzzyFilter,
        },
        defaultColumn: {
            minSize: 60,
            maxSize: 800,
        },
        columnResizeMode: 'onChange',

        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onPaginationChange: setPagination,
        onGlobalFilterChange: setGlobalFilter,

        state: {
            pagination: { pageIndex: page - 1, pageSize: count },
            globalFilter,
        },

        initialState: {
            // NavLink sets the initial search params
            pagination: {
                pageIndex: initialSearchParams.page - 1,
                pageSize: initialSearchParams.count,
            },
        },
        debugTable: true,
        debugHeaders: true,
        debugColumns: true,
    })


    const columnSizeVars = useMemo(() => {
        // same as example
    }, [table.getState().columnSizingInfo])

    console.log(globalFilter)
...

export function DataTable<TData, TValue>({
    columns,
    data,
    initialSearchParams,
}: DataTableProps<TData, TValue>) {

    const table = useReactTable({
        data,
        columns,
        filterFns: {
            fuzzy: fuzzyFilter,
        },
        defaultColumn: {
            minSize: 60,
            maxSize: 800,
        },
        columnResizeMode: 'onChange',

        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onPaginationChange: setPagination,
        onGlobalFilterChange: setGlobalFilter,

        state: {
            pagination: { pageIndex: page - 1, pageSize: count },
            globalFilter,
        },

        initialState: {
            // NavLink sets the initial search params
            pagination: {
                pageIndex: initialSearchParams.page - 1,
                pageSize: initialSearchParams.count,
            },
        },
        debugTable: true,
        debugHeaders: true,
        debugColumns: true,
    })


    const columnSizeVars = useMemo(() => {
        // same as example
    }, [table.getState().columnSizingInfo])

    console.log(globalFilter)
...

export function DataTable<TData, TValue>({
    columns,
    data,
    initialSearchParams,
}: DataTableProps<TData, TValue>) {

    const table = useReactTable({
        data,
        columns,
        filterFns: {
            fuzzy: fuzzyFilter,
        },
        defaultColumn: {
            minSize: 60,
            maxSize: 800,
        },
        columnResizeMode: 'onChange',

        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onPaginationChange: setPagination,
        onGlobalFilterChange: setGlobalFilter,

        state: {
            pagination: { pageIndex: page - 1, pageSize: count },
            globalFilter,
        },

        initialState: {
            // NavLink sets the initial search params
            pagination: {
                pageIndex: initialSearchParams.page - 1,
                pageSize: initialSearchParams.count,
            },
        },
        debugTable: true,
        debugHeaders: true,
        debugColumns: true,
    })


    const columnSizeVars = useMemo(() => {
        // same as example
    }, [table.getState().columnSizingInfo])

    console.log(globalFilter)
...

export function DataTable<TData, TValue>({
    columns,
    data,
    initialSearchParams,
}: DataTableProps<TData, TValue>) {

    const table = useReactTable({
        data,
        columns,
        filterFns: {
            fuzzy: fuzzyFilter,
        },
        defaultColumn: {
            minSize: 60,
            maxSize: 800,
        },
        columnResizeMode: 'onChange',

        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        onPaginationChange: setPagination,
        onGlobalFilterChange: setGlobalFilter,

        state: {
            pagination: { pageIndex: page - 1, pageSize: count },
            globalFilter,
        },

        initialState: {
            // NavLink sets the initial search params
            pagination: {
                pageIndex: initialSearchParams.page - 1,
                pageSize: initialSearchParams.count,
            },
        },
        debugTable: true,
        debugHeaders: true,
        debugColumns: true,
    })


    const columnSizeVars = useMemo(() => {
        // same as example
    }, [table.getState().columnSizingInfo])

    console.log(globalFilter)
...

StackBlitz

Shadcn DataTable Column Resizing Performant Example (forked) - Stac...

Run official live example code for Table Column Resizing Performant, created by Tanstack on StackBlitz

Help with CSS for resizing columns

Similar Threads

Similar Threads

Similar Threads