Victoria Baker
Senior developer
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 the parent <li> 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 .mr-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 .badge-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. Requires .position-static class |
| 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. Requires .position-static element |
| 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-control class. Supports all available sizes |
|
| Styled select | Single styled select | |
| 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 | ||
| Context menu | Right click on this cell | Basic implementation of a context menu attached to the table cell |
| 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 |