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 modalswith table row options. Click each icon to see it in action
|
|
| Links with dropdown |
Control links with optional dropdownmenu appended to one of the links
|
|
| Options dropdown |
Here all table row controls are moved to one general dropdownmenu, that is appended to 1 link
|
|
| Links with text |
Control link with text and icon. Text can be placed beforeicon or afterit. Optional .mr-2class adds extra right margin to the icon
|
|
| Badges | ||
| Badge | In progressDone |
Basic Bootstrap badge. Supports default contextual colors and custom colors from the color system
|
| Badge pill | 92190 |
Basic Bootstrap badge pill- badges with rounded corners
|
| Linked badge | Click me |
Liked badge. To use label as a link, add .badgeclass to the link element
|
| Linked badge pill | 59 |
Liked badge pill. To use badge as a link, add .badge-pillclass 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. Does not require .form-checkwrapper
|
|
| Left position |
|
Styled checkbox with label, leftposition
|
| Right position |
|
Styled checkbox with label, rightposition
|
| Styled radios | ||
| Styled radio |
Single styled radio without label. Does not require .form-checkwrapper
|
|
| Left position |
|
Styled radio with label, leftposition
|
| Right position |
|
Styled radio with label, rightposition
|
| Default checkboxes | ||
| Default checkbox |
|
Single default checkbox without label. Requires .position-staticclass
|
| Left position |
|
Default checkbox with label, leftposition
|
| Right position |
|
Default checkbox with label, rightposition
|
| Default radios | ||
| Default radio |
|
Single default radio without label. Requires .position-staticelement
|
| Left position |
|
Default radio with label, leftposition
|
| Right position |
|
Default radio with label, rightposition
|
| Switchery toggles | ||
| Switchery toggle | Single switchery checkbox | |
| Left position |
|
Switchery checkbox with label, leftposition
|
| Right position |
|
Switchery checkbox with label, rightposition
|
| File uploaders | ||
| Default upload | Default single file uploader | |
| Styled uploader |
Single file uploader, styled with uniform.jsplugin
|
|
| Multiple uploader |
Multiple file uploader, using file_input.jsplugin
|
|
| Inputs and selects | ||
| Input field |
Basic input field with .form-controlclass. Supports all available sizes
|
|
| Input group |
|
Extended form controls with appended and prepended text of buttons |
| Spinner |
Basic implementation of spinners based on bootspin.jslibrary
|
|
| Default select |
Default simple selects with .form-controlclass. Supports all available sizes
|
|
| Styled select |
Single styled select based on uniform.jslibrary
|
|
| Select2 single |
Single select based on select2.jslibrary
|
|
| Select2 multiple |
Multiple select based on select2.jslibrary
|
|
| Multiselect |
Multiple select with checkboxes based on multiselect.jslibrary
|
|
| UI components | ||
| Context menu | Right click on this cell |
Basic implementation of a context menuattached 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-iconclass 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 |