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
54% Complete
Progress bar, supports all available color and sizing options