Tables - Elements
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 | ||
| Text edit | Eugene Kopyov | Simple example of editable text inside table cell, using x-editable.js library |
| Edit with switch | Example of in-place editing with simple implementation of switchery checkbox |
|
| 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 |
|
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 | Bars with positive values | |
| Negative values | Bars with positive and negative values | |
| Stacked bars | 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 |