Appearance
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 Doe | john.doe@example.com | 35 |
Jane Smith | jane.smith@example.com | 28 |
Bob Johnson | bob.johnson@example.com | 42 |
Alice Williams | alice.williams@example.com | 29 |
Mike Thompson | mike.thompson@example.com | 41 |
Sarah Johnson | sarah.johnson@example.com | 33 |
David Smith | david.smith@example.com | 38 |
Jessica Williams | jessica.williams@example.com | 25 |
James Thompson | james.thompson@example.com | 31 |
Emily Johnson | emily.johnson@example.com | 27 |
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 Doe | john.doe@example.com | 35 |
Jane Smith | jane.smith@example.com | 28 |
Bob Johnson | bob.johnson@example.com | 42 |
Alice Williams | alice.williams@example.com | 29 |
Mike Thompson | mike.thompson@example.com | 41 |
Sarah Johnson | sarah.johnson@example.com | 33 |
David Smith | david.smith@example.com | 38 |
Jessica Williams | jessica.williams@example.com | 25 |
James Thompson | james.thompson@example.com | 31 |
Emily Johnson | emily.johnson@example.com | 27 |
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 Doe | john.doe@example.com | 35 |
Jane Smith | jane.smith@example.com | 28 |
Bob Johnson | bob.johnson@example.com | 42 |
Alice Williams | alice.williams@example.com | 29 |
Mike Thompson | mike.thompson@example.com | 41 |
Sarah Johnson | sarah.johnson@example.com | 33 |
David Smith | david.smith@example.com | 38 |
Jessica Williams | jessica.williams@example.com | 25 |
James Thompson | james.thompson@example.com | 31 |
Emily Johnson | emily.johnson@example.com | 27 |