Table: How to customize emptyContent #3863
Answered
by
AnYiEE
manuel-mauky
asked this question in
Q&A
Replies: 1 comment 1 reply
-
<Table
classNames={{
emptyWrapper: 'h-auto',
}}
>
<TableBody emptyContent={}></TableBody>
</Table> |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
manuel-mauky
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
The Table allows you to define
![image](https://private-user-images.githubusercontent.com/328387/375339937-042cab5b-4482-42f6-a23c-2d9b8c41331d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNTAxMTUsIm5iZiI6MTczOTE0OTgxNSwicGF0aCI6Ii8zMjgzODcvMzc1MzM5OTM3LTA0MmNhYjViLTQ0ODItNDJmNi1hMjNjLTJkOWI4YzQxMzMxZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwMTEwMTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kMjg2ZDgxNGM2ZTk5NzRiYmJhNGI5Mzc0NzQ0MDIwZjUxNjk3ZTU2MTM0ZjU1NGRhMmNlYWMzODRiM2ZjYzVkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.9EhW5BA6dBAOZON8FeAkQEDFOGRJ0CPpi4MYrHI0itU)
emptyContent
on the<TableBody>
component to show when no elements are available.However, the component you pass in there is rendered in a
<td>
element which has various styles assigned that you cannot customize. Especially theh-40
class is an issue in my case.I'd like to have a smaller height of the empty table but cannot find a way to achieve this.
Current result:
![image](https://private-user-images.githubusercontent.com/328387/375339118-620df60a-1bd0-4094-bdf1-9325e35550ab.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNTAxMTUsIm5iZiI6MTczOTE0OTgxNSwicGF0aCI6Ii8zMjgzODcvMzc1MzM5MTE4LTYyMGRmNjBhLTFiZDAtNDA5NC1iZGYxLTkzMjVlMzU1NTBhYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwMTEwMTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yNmYzOGU5MjYxY2NiZWVjOTZhZDg2MTJkOTFmYjZlZmNjY2Y1Y2Q5NGI1ZDg0ZjZlYjZiMTQzNjEzODQ5MjhkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.ViOF75mqo3coNac03qDaAFesYMmJX45Tq_SKvjlifMo)
Goal:
![image](https://private-user-images.githubusercontent.com/328387/375339226-c368cbd3-402b-4dda-be20-a544227140c5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNTAxMTUsIm5iZiI6MTczOTE0OTgxNSwicGF0aCI6Ii8zMjgzODcvMzc1MzM5MjI2LWMzNjhjYmQzLTQwMmItNGRkYS1iZTIwLWE1NDQyMjcxNDBjNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwMTEwMTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yOTJmNDMzNTI5YzliYTEyYTRlMjRjYmJhYjUzZGViNGVlMTNmYjQzYjMyNjk5NDI5NDM3NWNjYmU2ZTRmYTgzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.P_h9UorK1-4dEIBWuzFadMRbhkLRixRIG0Gknsosx-w)
Is it somehow possible to customize the classes on that
<td>
element? I've tried to put classes on the<TableBody>
but without success.Beta Was this translation helpful? Give feedback.
All reactions