column fixed width

can anyone point where to put size?: number to have a specific column with a fixed size?

7 Replies

conscious-sapphire•3y ago

You should place it in your column definition. https://tanstack.com/table/v8/docs/api/features/column-sizing#size

Column Sizing | TanStack Table Docs

State Column sizing state is stored on the table using the following shape:

fascinating-indigoOP•3y ago

already tried, adding size:50 have no effect:

const defaultColumns = [
        {
            accessorFn: (row) => {
                return {
                    userId: row.userId || '',
                    active: row.active || false
                };
            },
            //accessorFn: (row) => row.userId,
            id: 'userId',
            cell: (info) => renderComponent(AnotherComp, info.getValue()),
            header: () => 'ID',
            size: 50 <-- this have no effect
        }
]

conscious-sapphire•3y ago

@CookieDood - My bad. I forgot to include the second part of my response. Once you have the size defined in the columns, you need to make sure your are setting the width in the HTML that renders the table. Something like this:

          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th {
                  ...{
                    key: header.id,
                    className: "px-6 py-3 ",
                    colSpan: header.colSpan,
                    style: {
                      width: header.getSize(),
                    },
                  }}>
                  <div

          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th {
                  ...{
                    key: header.id,
                    className: "px-6 py-3 ",
                    colSpan: header.colSpan,
                    style: {
                      width: header.getSize(),
                    },
                  }}>
                  <div

Notice the width: header.getSize() line. There is an example of this here: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/column-sizing?from-embed=&file=/src/main.tsx

CodeSandbox

tanstack-table-example-column-sizing - CodeSandbox

tanstack-table-example-column-sizing using @tanstack/react-table, react, react-dom

fascinating-indigoOP•3y ago

thanks I was missing the HTML part since I didn't see it in the docs

conscious-sapphire•3y ago

No problem! Yes, it is not in the docs. Any important thing that I often need to remind myself of is that Tanstack Table is headless. Meaning, as developers we are required to style the table. And in this instance, the table provides the size property but it is up to use to use the size property to style the table accordingly.

absent-sapphire•3y ago

I was facing similar issue. I am able to set up width of column now. but what is size unit if am giving 284 it is taking 168px. in earlier version v7 if we set width 284 it will take 284px no difference what I missing here . Thanks for the answer for above question @michael.weiner I was facing similar issue. I am able to set up width of column now. but what is size unit if am giving 284 it is taking 168px. in earlier version v7 if we set width 284 it will take 284px no difference what I missing here . Thanks for the answer for above question

rival-black•3y ago

BUMP @michael.weiner ^ same question

Gaming

Programming

column fixed width

Did you find this page helpful?