Skip to content
On this page

Styles

Boxed

Boxed is default style for table.

Name
John Doe
Email
john.doe@example.com
Age
35
Name
Jane Smith
Email
jane.smith@example.com
Age
28
Name
Bob Johnson
Email
bob.johnson@example.com
Age
42
Name
Alice Williams
Email
alice.williams@example.com
Age
29
Name
Mike Thompson
Email
mike.thompson@example.com
Age
41
Name
Sarah Johnson
Email
sarah.johnson@example.com
Age
33
Name
David Smith
Email
david.smith@example.com
Age
38
Name
Jessica Williams
Email
jessica.williams@example.com
Age
25
Name
James Thompson
Email
james.thompson@example.com
Age
31
Name
Emily Johnson
Email
emily.johnson@example.com
Age
27
John Doejohn.doe@example.com35
Jane Smithjane.smith@example.com28
Bob Johnsonbob.johnson@example.com42
Alice Williamsalice.williams@example.com29
Mike Thompsonmike.thompson@example.com41
Sarah Johnsonsarah.johnson@example.com33
David Smithdavid.smith@example.com38
Jessica Williamsjessica.williams@example.com25
James Thompsonjames.thompson@example.com31
Emily Johnsonemily.johnson@example.com27
1 - 10 of 14

Boxed Striped

You can achieve this by adding striped prop to the component .

Name
John Doe
Email
john.doe@example.com
Age
35
Name
Jane Smith
Email
jane.smith@example.com
Age
28
Name
Bob Johnson
Email
bob.johnson@example.com
Age
42
Name
Alice Williams
Email
alice.williams@example.com
Age
29
Name
Mike Thompson
Email
mike.thompson@example.com
Age
41
Name
Sarah Johnson
Email
sarah.johnson@example.com
Age
33
Name
David Smith
Email
david.smith@example.com
Age
38
Name
Jessica Williams
Email
jessica.williams@example.com
Age
25
Name
James Thompson
Email
james.thompson@example.com
Age
31
Name
Emily Johnson
Email
emily.johnson@example.com
Age
27
John Doejohn.doe@example.com35
Jane Smithjane.smith@example.com28
Bob Johnsonbob.johnson@example.com42
Alice Williamsalice.williams@example.com29
Mike Thompsonmike.thompson@example.com41
Sarah Johnsonsarah.johnson@example.com33
David Smithdavid.smith@example.com38
Jessica Williamsjessica.williams@example.com25
James Thompsonjames.thompson@example.com31
Emily Johnsonemily.johnson@example.com27
1 - 10 of 14

Dashed Borders

You can achieve this by adding border-dashed prop to the component .

Name
John Doe
Email
john.doe@example.com
Age
35
Name
Jane Smith
Email
jane.smith@example.com
Age
28
Name
Bob Johnson
Email
bob.johnson@example.com
Age
42
Name
Alice Williams
Email
alice.williams@example.com
Age
29
Name
Mike Thompson
Email
mike.thompson@example.com
Age
41
Name
Sarah Johnson
Email
sarah.johnson@example.com
Age
33
Name
David Smith
Email
david.smith@example.com
Age
38
Name
Jessica Williams
Email
jessica.williams@example.com
Age
25
Name
James Thompson
Email
james.thompson@example.com
Age
31
Name
Emily Johnson
Email
emily.johnson@example.com
Age
27
John Doejohn.doe@example.com35
Jane Smithjane.smith@example.com28
Bob Johnsonbob.johnson@example.com42
Alice Williamsalice.williams@example.com29
Mike Thompsonmike.thompson@example.com41
Sarah Johnsonsarah.johnson@example.com33
David Smithdavid.smith@example.com38
Jessica Williamsjessica.williams@example.com25
James Thompsonjames.thompson@example.com31
Emily Johnsonemily.johnson@example.com27
1 - 10 of 14