Tables
Use same semantic table elements of HTML5 to make table. Just the difference is, in this case first character of name syllable should be uppercase.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<Table class="table">
<THead>
<Tr>
<Th scope="col">#</Th>
<Th scope="col">First</Th>
<Th scope="col">Last</Th>
<Th scope="col">Handle</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Th scope="row">1</Th>
<Td>Mark</Td>
<Td>Otto</Td>
<Td>@mdo</Td>
</Tr>
<Tr>
<Th scope="row">2</Th>
<Td>Jacob</Td>
<Td>Thornton</Td>
<Td>@fat</Td>
</Tr>
<Tr>
<Th scope="row">3</Th>
<Td colspan="2">Larry the Bird</Td>
<Td>@twitter</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Variants
Use prop variant to color tables, table rows or individual cells. Supported values:
type ColorVariants = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
1
| Variant | Cell | Cell |
|---|---|---|
| primary | Cell | Cell |
| secondary | Cell | Cell |
| success | Cell | Cell |
| danger | Cell | Cell |
| warning | Cell | Cell |
| info | Cell | Cell |
| light | Cell | Cell |
| dark | Cell | Cell |
<Table>
<THead>
<Th>Variant</Th>
<Th>Cell</Th>
<Th>Cell</Th>
</THead>
<TBody>
<Tr :variant="v"
v-for="v in ['primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'light' , 'dark']">
<Td>{{v}}</Td>
<Td>Cell</Td>
<Td>Cell</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Striped rows
Use prop striped to true, to make striped tables.
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table striped>
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 3">
<Td>{{i}}</Td>
<Td>{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
At the same time variants can be used too.
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table striped variant="dark">
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 3">
<Td>{{i}}</Td>
<Td>{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Hoverable rows
Use prop hover to make table rows hoverable.
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table hover>
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 3">
<Td>{{i}}</Td>
<Td>{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
These hoverable rows can also be combined with the striped variant:
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table hover striped>
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 3">
<Td>{{i}}</Td>
<Td>{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Active tables
Highlight a table row or cell by adding active prop.
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| 4 | 4 | 4 |
| 5 | 5 | 5 |
<Table>
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 5" :active="i==3">
<Td>{{i}}</Td>
<Td :active="i===5 || i===1">{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Bordered tables
Use prop bordered
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table bordered>
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 3">
<Td>{{i}}</Td>
<Td>{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Border Variant
Use prop border-variant to apply border color variants.
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table bordered border-variant="primary">
<THead>
<Tr>
<Th>One</Th>
<Th>Two</Th>
<Th>Three</Th>
</Tr>
</THead>
<TBody>
<Tr v-for="i in 3">
<Td>{{i}}</Td>
<Td>{{i}}</Td>
<Td>{{i}}</Td>
</Tr>
</TBody>
</Table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Tables without borders
Use prop borderless
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table borderless>
........
</Table>
1
2
3
4
2
3
4
Small tables
Use prop small
| One | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table small>
........
</Table>
1
2
3
4
2
3
4
Vertical alignment
Use prop valign with values 'middle' | 'bottom' | 'top'
Responsive Table
Use prop responsive to make Responsive Table
Supported values:
type sizes = "sm" | "md" | "lg" | "xl" | "xxl" | true | false;
1
| Responsive on sm breakpoints | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| Responsive on md breakpoints | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| Responsive on lg breakpoints | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| Responsive on xl breakpoints | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| Responsive on xxl breakpoints | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
| Responsive on all breakpoints | Two | Three |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
<Table v-for="s in ['sm' , 'md' , 'lg' , 'xl' , 'xxl', true]" :responsive="s">
<THead>
<Tr>
<Th>Responsive on {{s==true?'all breakpoints':s+' breakpoints'}}</Th>
<Th>Two</Th>
<Th>Three</Th>
</WTr>
</THead>
........
</Table>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11