first column of objects table fixed

[Muralidhar22]

closes #2657

Before

After

[github-actions]

CLA

Hello there and welcome to our project!
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.
Although we don't have a dedicated legal counsel, having this kind of agreement can protect us from potential legal issues or patent trolls.
Thank you for your understanding.

Generated by 🚫 dangerJS against 0c2384a

[lucasbordeau]

@Muralidhar22 thanks for your contribution.

This issue requires a bit of extra work :

• The table contains a lot of components and logic
• Thus a full re-render is very costly and is visible by the user
• We only manipulate CSS here
• So we can use direct DOM manipulation via a tableRef

Please also try to create a separate component to hold this part of the tree :

<StyledTable ref={tableRef} className="entity-table-cell">
  <RecordTableHeader createRecord={createRecord} />
  <RecordTableBodyEffect />
  <RecordTableBody />
</StyledTable> 

Because the RecordTable component is handling too much logic.

You can get rid of isTabelScrolledState and use directly useInView in this new component, and toggle a .shadow class directly in the onChange event of useInView.

[lucasbordeau]

Nice, that's way better ! We can see it's instantly changing the CSS.

I did a bit of renaming and reorganizing.