0

I already have horizontal line at the bottom of the table, and my problem is, if there is too much data on the table, how can i add another scrollbar on the top of the header of the table? Thank you!

<BTable 
    id="project-table" 
    striped 
    bordered 
    hover 
    size="md" 
    {...getTableProps()} 
    style={{
        overflowX: 'scroll !important',
        whiteSpace: 'nowrap',
    }}
    >
    <thead>
    {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
        <th {...column.getHeaderProps()}>
            {column.render('Header')}
        </th>
        ))}
    </tr>
    ))}
    </thead>
    <tbody>
    {page.map((row, i) => {
    prepareRow(row)
    return (
        <tr {...row.getRowProps()}>
        {row.cells.map(cell => {
            return (
            <td {...cell.getCellProps()}>
                {cell.render('Cell')}
            </td>
            )
        })}
        </tr>
    )
    })}
    </tbody>
</BTable>

enter image description here

Clark
  • 169
  • 3
  • 11

1 Answers1

-1

Just add overflow-y: 'scroll' in the style too

  • 1
    It does not add any scrollbar at the top of the table. – Clark Apr 21 '21 at 05:08
  • Oh, I am sorry. miss read the post. https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table –  Apr 21 '21 at 17:42