Table components
Table below contains different examples of components, that can be used in the table: form components, interface components, buttons 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. Also added a few examples of sparklines based on sparklines.js library. For more advanced sparklines D3.js library suits best
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 .position-left class adds extra right margin to the icon
Labels and badges
Label In progress Done Basic Bootstrap label. Supports default contextual colors and custom colors from the color system
Badge 92 190 Basic Bootstrap badge. As as labels, badges support contextual colors and custom colors
Linked label Click me Liked label. To use label as a link, add .label class to the link element
Linked badge 59 Liked badge. To use badge as a link, add .badge class to the link element
Label with dropdown Label with dropdown menu
Badge with dropdown Badge 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. Does not require .checkbox classes
Styled radios
Styled radio Single styled radio without label. Does not require .radio classes
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. Does not require .checkbox classes
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. Does not require .radio classes
Left position Default radio with label, left position
Right position Default radio with label, right position
Switchery toggles
Switchery toggle
Single switchery checkbox in mini size
Left position Switchery checkbox with label, left position
Right position Switchery checkbox with label, right position
File uploaders
Default upload Default single file uploader
Styled uploader Single file uploader, styled with uniform.js plugin
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
Select2 single Single select based on select2.js library
Select2 multiple Multiple select based on select2.js library
Selectbox select Single select based on selectBoxIt.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
60% Complete
Progress bar, supports all available color and sizing options
Simple sparklines
Line 5,6,7,9,9,5,3,2,2,4,6,7,9,9,9,9,9,9,3,4,5,1,7,4,3,2,7,8,4,1,7,3,4,7,8,9,8,7,8,9,5,6,7,9,9 Simple sparkline based on sparklines.js library
Filled area 5,6,7,9,9,5,3,2,2,4,6,7,9,9,9,9,9,9,3,4,5,1,7,4,3,2,7,8,4,1,7,3,4,7,8,9,8,7,8,9,5,6,7,9,9 Line with filled area
Bars 10,8,9,3,5,8,5,9,4,4,9,11 Bars with positive values
Negative values 4,1,5,7,-9,9,8,7,-6,6,4,-7,-8,4,3,2,2,5,-6,-7 Bars with positive and negative values
Stacked bars 4:1,5:7,9:9,8:7,6:6,4:7,8:4,3:2,2:5,6:7 Stacked bars
Composite 4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7 Composite chart with line and bars
Pies 4,1,5 7,9,4 2,5,7 Multiple pies
Bullet 10,12,12,9,7 Simple bullet chart