Table components
Table below contains different examples of components that can
be used in the table: form components, interface components,
buttons, list of actions etc. All of them are adapted for
different cases, such as multiple elements in the same table
cell. These components support all available sizes and styles.
Charts are also supported, but in certain sizes.
| Control buttons and icons | ||
|---|---|---|
| Control links | Basic table row control buttons. These links appear as a list of links with icons | |
| Colored links |
Control links support different colors: default
Bootstrap contextual colors and custom text colors from
the custom color system. To use these colors add
.text-* class to
<a> element
|
|
| Links with tooltip |
Table row control links with default Bootstrap tooltip
triggered on hover
|
|
| Links with modals |
These control links launch modals with
table row options. Click each icon to see it in action
|
|
| Links with dropdown |
Control links with optional dropdown menu
appended to one of the links
|
|
| Options dropdown |
Here all table row controls are moved to one
general dropdown menu, that is appended to
1 link
|
|
| Links with text |
Control link with text and icon. Text can be placed
before icon or after it.
Optional .me-2 class adds extra right
margin to the icon
|
|
| Badges | ||
| Badge | In progress Done |
Basic Bootstrap badge. Supports default
contextual colors and custom colors from the color
system
|
| Badge pill | 92 190 |
Basic Bootstrap badge pill - badges with
rounded corners
|
| Linked badge | Click me |
Liked badge. To use label as a link, add
.badge class to the link element
|
| Linked badge pill | 59 |
Liked badge pill. To use badge as a link, add
.rounded-pill class to the link element
|
| Badge with dropdown | Badge with dropdown menu | |
| Badge pill with dropdown | Badge pill with dropdown menu | |
| Styled checkboxes | ||
| Styled checkbox | Single styled checkbox without label | |
| Left position |
Styled checkbox with label, left position
|
|
| Right position |
Styled checkbox with label, right position
|
|
| Styled radios | ||
| Styled radio | Single styled radio without label | |
| Left position |
Styled radio with label, left position
|
|
| Right position |
Styled radio with label, right position
|
|
| Default checkboxes | ||
| Default checkbox | Single default checkbox without label | |
| Left position |
Default checkbox with label, left position
|
|
| Right position |
Default checkbox with label, right position
|
|
| Default radios | ||
| Default radio | Single default radio without label | |
| Left position |
Default radio with label, left position
|
|
| Right position |
Default radio with label, right position
|
|
| Switch toggles | ||
| Switch | Single switch | |
| Left position |
Switch checkbox with label, left position
|
|
| Right position |
Switch checkbox with label, right position
|
|
| File uploaders | ||
| Default upload | Default single file uploader | |
| Styled uploader | Single file uploader, styled with pure CSS | |
| Multiple uploader |
Multiple file uploader, using
file_input.js plugin
|
|
| Inputs and selects | ||
| Input field |
Basic input field with .form-control class.
Supports all available sizes
|
|
| Input group |
|
Extended form controls with appended and prepended text of buttons |
| Spinner |
|
Basic implementation of spinners based on
bootspin.js library
|
| Default select |
Default simple selects with
.form-select class. Supports all available
sizes
|
|
| Select2 single |
Single select based on select2.js library
|
|
| Select2 multiple |
Multiple select based on select2.js library
|
|
| Multiselect |
Multiple select with checkboxes based on
multiselect.js library
|
|
| UI components | ||
| Button | Simple button, supports all sizes and colors | |
| Buttons with icon |
|
Simple button and button dropdowns with icon only,
require .btn-icon class for padding
correction
|
| Button dropdown |
|
Button dropdown. Also supports segmented buttons and button toggles |
| Progress bar |
|
Progress bar, supports all available color and sizing options |
