#### 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, 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

- Options

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 | Priority | Badge with dropdown menu
Badge pill with dropdown | 50% | Badge pill with dropdown menu
Styled checkboxes
Styled checkbox |  | Single styled checkbox without label. Does not require `.form-check` wrapper
Left position | Left styled checkbox | Styled checkbox with label, `left` position
Right position | Right styled checkbox | Styled checkbox with label, `right` position
Styled radios
Styled radio |  | Single styled radio without label. Does not require `.form-check` wrapper
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. Requires `.position-static` class
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. Requires `.position-static` element
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
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
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 based on `uniform.js` library
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

##### 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: