How to create sticky column with <Table>

[minhchu]

Hello everyone

I want to create table with sticky column like ant design: https://codesandbox.io/s/lwvy7g
How can I get the same table with chakra-ui.

Thanks

[dvlden]

Your demo is no longer working, at least for me.
I had a problem making this work until I realized that <TableContainer /> component has overflow for x and y applied. Unset both, and sticky will wherever you put it.

<TableContainer overflowX="unset" overflowY="unset">
  <Table variant="simple">
    <TableCaption>Odgovori od vaših zvanica</TableCaption>

    <Thead position="sticky" top={0} zIndex="docked">
      <Tr>
        <Th>Name</Th>
        <Th>Phone</Th>
       </Tr>
    </Thead>
    
    ...
  </Table>
</TableContainer>

[minhchu]

Hi @dvlden

Thanks for your reply.

Your demo is no longer working, at least for me.

I guess you should resize your browser until a horizontal scroll bar appears in the table. I got that sandbox from ant design document and it is still working.

I see that you are making <Thead> sticky. But what I need is the first column (first cell of every row) to be sticky.

[FullstackWEB-developer]

Hi @dvlden
I am using chakra.
I also want to be sticky the first and last columns with header like this, but is there a neat solution?
https://codepen.io/chriscoyier/pen/yLVNErX
This is my demo link
https://codesandbox.io/s/chakra-ui-data-table-forked-c0pt9n?file=/src/DataTable.tsx

@minhchu
Did you find solution?

[minhchu]

@FullstackWEB-developer
here is my solution, not a neat solution but it just works
notice the position: 'sticky' part

Column.ts:

  useMemo(() => {
    const columns: Column<Customer>[] = [
      {
        Header: 'Number',
        Cell: ({ row }: CellProps<Customer>) => (
          <Text textAlign="center">{row.index + 1}</Text>
        ),
        width: 45,
        position: 'sticky',
        zIndex: 2,
        textAlign: 'center',
      },
      {
        Header: 'Name',
        Cell: ({ row: { original } }: CellProps<Customer>) => {
          return (
            <>
              <Text fontWeight="bold" isTruncated>
                <Tooltip label={original.id}>{original.name}</Tooltip>
              </Text>
              <Text isTruncated>
                {original.age} - {original.address}
              </Text>
            </>
          );
        },
        position: 'sticky',
        zIndex: 2,
        _after: {
          boxShadow: 'inset 10px 0 8px -8px rgb(0 0 0 / 15%)',
          content: `''`,
          position: 'absolute',
          top: 0,
          right: 0,
          bottom: '-1px',
          width: '30px',
          transform: 'translateX(100%)',
        },
      },
      {
        Header: 'Contact',
        Cell: ({ row: { original } }: CellProps<Customer>) => (
          <>
            <Text textAlign="center">{original.contact}</Text>
          </>
        ),
        textAlign: 'center',
        maxWidth: 150,
      },
]
})

Table.ts:

          <Thead>
            {headerGroups.map((headerGroup) => (
              <Tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <Th
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                    width={column.width}
                    zIndex={column.zIndex}
                    position={column.position}
                    left={column.totalLeft}
                    _after={column._after}
                    textAlign={column.textAlign}
                  >
                    {column.render('Header')}
                    <Sortable column={column} />
                  </Th>
                ))}
              </Tr>
            ))}
          </Thead>

                <Tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    const column = cell.column;
                    return (
                      <Td
                        {...cell.getCellProps()}
                        width={column.width}
                        zIndex={column.zIndex}
                        position={column.position}
                        left={column.totalLeft}
                        _after={column._after}
                      >
                        {cell.render('Cell')}
                      </Td>
                    );
                  })}
                </Tr>

[minhchu]

headerGroups and row.getRowProps come from react-table

[csagar131]

@minhchu could you please provide the codesandbox link of the above functionality of sticky column in chakra UI, It would be very helpful as i am new to chakra.

[theoilside]

Here is the simplest way to make sticky columns with Chakra UI:

If you want first column to be sticky: use these props for the first Th and Td

position={'sticky'}
left={'0'}

If you want last column to be sticky: use these props for the last Th and Td

position={'sticky'}
right={'0'}

Then you can add backgroundColor={'white'} or something else to remove the overlap.