CODEWITHSUNDEEP
javascriptreactjs
Abanslash
Abanslash

Reputation: 69

Hiding some columns if table is too big

I am a beginner in react and web apps in general let me know if anything is unclear.

I have the following table :

<div>
<table id="mytableid" className="some classes">
    <thead>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Age</th>
        <th>Sex</th>
        <th>Blood Type</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John Doe</td>
        <td>Some place somewhere</td>
        <td>093-1252-4879</td>
        <td>51</td>
        <td>Male</td>
        <td>AB</td>
    </tr>
    </tbody>
</table>
</div>

Let's say I want to hide Address and blood type if table is too big to fit in a div.

The way I am thinking of doing this is to check the size of the div and the table in componentDidMount if the size of the table is bigger than the div then I will set the style of those two columns to display:none.

I did something similar for submenu transitions where I would change my component set on the componentDidMount to get the height then put the visibility to hidden by changing the state. I didn't notice any slowness neither can I see that the submenu was actually visible(on chrome)

I saw some people are doing things like for the nth column to not be displayed if the screen is too small using purely css which is nice. But in my case I am not sure if I could do something similar as I would like the user of my component to specify which columns to hide.

My question is if it is the usual way for webapp developers to display the component check the result on componentDidMount and then change how things look or is there a different pattern?

Upvotes: 0

Views: 302

Answers (1)

Manoj
Manoj

Reputation: 2085

The one pattern I have seen is, removing items on demand in such cases, i.e. user has choice of which columns to see and which one to hide. Refer this dynamic-columns example from an open source. http://uikernel.io/examples/dynamic-columns/

Upvotes: 2

Related Questions