Table Last updated: 9/21/21
Use a Table to display data.
CSS Styling React Components
Base Use the base class pier-table to wrap thead and tbody elements. Element class pier-table__row should wrap either element classes pier-table__header or pier-table__cell depending if they are inside of the thead or tbody.
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
< table class = "pier-table" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
Sizes Use the modifier classes pier-table--sm, pier-table--md, or pier-table--lg to change the size of the Table.
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
< table class = "pier-table pier-table--sm" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
< table class = "pier-table pier-table--md" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
< table class = "pier-table pier-table--lg" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
Striped Use the modifier class pier-table--striped to change the style of the Table to striped.
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
< table class = "pier-table pier-table--striped" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
Dark Use the modifier class pier-table--dark to change the style of the Table for dark UI themes.
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
Pete Pink
pink@yahoo.com
23
Blair Blue
blue@yahoo.com
32
Vicky Violet
violet@yahoo.com
18
< table class = "pier-table pier-table--dark" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
< table class = "pier-table pier-table--dark pier-table--striped" >
< thead>
< tr class = "pier-table__row" >
< th class = "pier-table__header" > Name< / th>
< th class = "pier-table__header" > Email< / th>
< th class = "pier-table__header" > Age< / th>
< / tr>
< / thead>
< tbody>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Pete Pink< / td>
< td class = "pier-table__cell" > pink@yahoo. com< / td>
< td class = "pier-table__cell" > 23 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Blair Blue< / td>
< td class = "pier-table__cell" > blue@yahoo. com< / td>
< td class = "pier-table__cell" > 32 < / td>
< / tr>
< tr class = "pier-table__row" >
< td class = "pier-table__cell" > Vicky Violet< / td>
< td class = "pier-table__cell" > violet@yahoo. com< / td>
< td class = "pier-table__cell" > 18 < / td>
< / tr>
< / tbody>
< / table>
© 2021 Gumgum, Inc.
