reactjs creating part of the table scrollable

Question

To make part of the table scrollable I'm using a div inside of the table but getting the warning:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>

I understand the warning, but I would like part of the table (most of it) to be scrollable, thus limiting the maxheight of part of the table:

<div className="main-table">
               <table className="main-edit-table" align="right">
                     <tbody>
                            <tr>
                                 <th>haveri</th>
                             </tr>
                              <div className="inst-container">
                              {this.state.list && this.state.list.map((collection, key) => (
                                    <tr key={key}>
                                        <td>{key+1}</td>
                                        <td>
                                            <div className="main-item-container">
                                                <span>{collection}</span>
                                            </div>
                                        </td>
                                        <td>{collection.subjects[0] && collection.subjects[0].name}</td>
                                    </tr>      
                                    ))}
                                    </div>
                            </tbody>
                        </table>

                    </div>

CSS:

.inst-container {
    border: 1px solid #eeccee;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;
}

All I'm doing is inserting a div inside the table, after its headings, to make the table itself scrollable.

Two questions:

Is the warning "that bad"? I mean, I get the warning but it's working fine
What would you do to create the heading (which can contain a few columns) and a scrollable table underneath? Is using grid system the only option?

MMH · Accepted Answer · 2022-05-04 06:52:52Z

4

I would rather wrap the whole table inside a div container with the overflow and set the column headers to sticky position.

See below:

<div className="container">
    <table className="main-edit-table" align="right">
        <thead>
            <tr>
                <th className="sticky-column">haveri</th>
            </tr>
        </thead>
        <tbody>
                {this.state.list && this.state.list.map((collection, key) => (
                    <tr key={key}>
                        <td>{key+1}</td>
                         <td>
                             <div className="main-item-container">
                                 <span>{collection}</span>
                             </div>
                             </td>
                             <td>{collection.subjects[0] && 
                             collection.subjects[0].name}</td>
                    </tr>      
                                ))}
        </tbody>
    </table>
</div>

CSS:

.sticky-column {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0
}
                
.container {
    border: 1px solid #eeccee;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;
}

Have a look at the CodeSandBox sample: https://xyv5nl.csb.app/

edited May 4, 2022 at 6:52

answered Feb 4, 2019 at 5:04

MMH

8966 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sir-haver Over a year ago

Thanks Mazhar H have you tested it? The result isn't good since when scrolling, the header merges into the scrollable table, it's not on top of it

sir-haver Over a year ago

Oh nice thanks a lot! I guess I did a mistake causing it not to function like in your example. Will check it out, thank you

Collectives™ on Stack Overflow

reactjs creating part of the table scrollable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related