0% Complete
uBeac
GitHub
uBeac

Tables

Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.

#

Basic Table

Table component has basic styles.

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Bordered Tables

You can add borders for table rows using border prop.

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Borderless Tables

You can disable borders by setting border to 0.

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Hover effect

Table rows can change it's color if yo hover on them.

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Truncate cells

TODO

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Striped Tables

You can change colors of Even/Odd rows by adding striped prop.

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Responsive Tables

TODO

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin
#

Table Colors

TODO

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
#

Sortable Table

TODO

Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin