mirror of https://github.com/abpframework/abp.git
committed by
GitHub
1 changed files with 61 additions and 0 deletions
@ -0,0 +1,61 @@ |
|||
# Tables |
|||
|
|||
## Introduction |
|||
|
|||
`abp-table` is the basic tag component for tables in abp. |
|||
|
|||
Basic usage: |
|||
|
|||
````csharp |
|||
<abp-table hoverable-rows="true" responsive-sm="true"> |
|||
<thead> |
|||
<tr> |
|||
<th scope="Column">#</th> |
|||
<th scope="Column">First</th> |
|||
<th scope="Column">Last</th> |
|||
<th scope="Column">Handle</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="Row">1</th> |
|||
<td>Mark</td> |
|||
<td>Otto</td> |
|||
<td table-style="Danger">mdo</td> |
|||
</tr> |
|||
<tr table-style="Warning"> |
|||
<th scope="Row">2</th> |
|||
<td>Jacob</td> |
|||
<td>Thornton</td> |
|||
<td>fat</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">3</th> |
|||
<td table-style="Success">Larry</td> |
|||
<td>the Bird</td> |
|||
<td>twitter</td> |
|||
</tr> |
|||
</tbody> |
|||
</abp-table> |
|||
```` |
|||
|
|||
|
|||
|
|||
## Demo |
|||
|
|||
See the [tables demo page](https://bootstrap-taghelpers.abp.io/Components/Tables) to see it in action. |
|||
|
|||
## abp-table Attributes |
|||
|
|||
- **responsive**: Used to create responsive tables up to a particular breakpoint. see [breakpoint specific](https://getbootstrap.com/docs/4.1/content/tables/#breakpoint-specific) for more information. |
|||
- **responsive-sm**: If not set to false, sets the table responsiveness for small screen devices. |
|||
- **responsive-md**: If not set to false, sets the table responsiveness for medium screen devices. |
|||
- **responsive-lg**: If not set to false, sets the table responsiveness for large screen devices. |
|||
- **responsive-xl**: If not set to false, sets the table responsiveness for extra large screen devices. |
|||
- **dark-theme**: If set to true, sets the table color theme to dark. |
|||
- **striped-rows**: If set to true, adds zebra-striping to table rows. |
|||
- **hoverable-rows**: If set to true, adds hover state to table rows. |
|||
- **border-style**: Sets the border style of the table. Should be one of the following values: |
|||
- `Default` (default) |
|||
- `Bordered` |
|||
- `Borderless` |
|||
Loading…
Reference in new issue