#### Tables - Elements

Statistics Invoices Schedule

##### 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 | Options | 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 | Priority | Label with dropdown menu
Badge with dropdown | 50% | Badge with dropdown menu
Styled checkboxes
Styled checkbox |  | Single styled checkbox without label
Left position | Left styled checkbox | Styled checkbox with label, `left` position
Right position | Right styled checkbox | 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 | Left styled radio | Styled radio with label, `left` position
Right position | Right styled radio | Styled radio with label, `right` position
Default checkboxes
Default checkbox |  | Single default checkbox without label. Does not require `.checkbox` classes
Left position | Left default checkbox | Default checkbox with label, `left` position
Right position | Right default checkbox | Default checkbox with label, `right` position
Default radios
Default radio |  | Single default radio without label. Does not require `.radio` classes
Left position | Left default radio | Default radio with label, `left` position
Right position | Right default radio | Default radio with label, `right` position
Switchery toggles
Switchery toggle |  | Single switchery checkbox in `mini` size
Left position | Left switch | Switchery checkbox with label, `left` position
Right position | Right switch | 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 | 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

##### Edit table

First Name | Last Name | Username | Action
--- | --- | --- | ---

##### Confirm action

You are about to remove this row. Are you sure?

##### Row options

Allow select:
Allow edit:
Add status:
Set priority:
Enable controls:
Controls: