Table Widget
A table is a collection of related data held in a table format within a database. It consists of columns and rows.
In relational databases, and flat file databases, a table is a set of data elements (values) using a model of vertical columns (identifiable by name) and horizontal rows, the cell being the unit where a row and column intersect.[
Table of Contents
Configuration Options
Since Docly is based on Bootstrap 4, so you can safley use Bootstrap’s table classes to style your table. We also added more table styles and functionality to our template.
| Name | |
|---|---|
|
background Color |
The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties. |
|
background Color.stroke |
The color of the chart border, as an HTML color string.
Default: '#666'Type: string |
|
background Color.stroke Width |
The border width, in pixels. Type: number |
|
background Color.fill |
The chart fill color, as an HTML color string. Type: string |
|
chartArea |
An object with members to configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example: Type: object Default: null |
|
chartArea.backgroundColor |
Chart area background color. When a string is used, it can be either a hex string (e.g., '#fdc') or an English color name. When an object is used, the following properties can be provided:
Type: string or object Default: 'white' |
|
chartArea.left |
How far to draw the chart from the left border. Type: number or string Default: auto |
|
chartArea.top |
How far to draw the chart from the top border.
Type: number or string Default: auto |
Default Tables
Since Docly is based on Bootstrap 4, so you can safley use Bootstrap’s table classes to style your table. We also added more table styles and functionality to our template.
| Sample ID | Reading #1 | Reading #2 | Reading #3 | Reading #4 |
|---|---|---|---|---|
|
Manually |
555 |
475 |
756 |
155 |
|
Shortcuts |
478 |
754 |
124 |
688 |
|
Content |
987 |
10 |
745 |
4187 |
|
Pomodoro timer |
4187 |
688 |
478 |
756 |
|
Keyboard |
4455 |
654 |
784 |
657 |
|
Manually |
784 |
784 |
621 |
157 |
|
Timeline |
884 |
254 |
105 |
356 |
|
Pomodoro |
356 |
884 |
465 |
644 |
Basic Tables
Since Docly is based on Bootstrap 4, so you can safley use Bootstrap’s table classes to style your table. We also added more table styles and functionality to our template.
| # | First Name | Last Name | Username | |
|---|---|---|---|---|
|
Manually |
555 |
475 |
756 |
155 |
|
Shortcuts |
478 |
754 |
124 |
688 |
|
Content |
987 |
10 |
745 |
4187 |
|
Pomodoro timer |
4187 |
688 |
478 |
756 |
|
Keyboard |
4455 |
654 |
784 |
657 |
|
Manually |
784 |
784 |
621 |
157 |
|
Timeline |
884 |
254 |
105 |
356 |
|
Pomodoro |
356 |
884 |
465 |
644 |
Dark Mode Table
Since Docly is based on Bootstrap 4, so you can safley use Bootstrap’s table classes to style your table. We also added more table styles and functionality to our template.
| # | First Name | Last Name | Username | |
|---|---|---|---|---|
|
Manually |
555 |
475 |
756 |
155 |
|
Shortcuts |
478 |
754 |
124 |
688 |
|
Content |
987 |
10 |
745 |
4187 |
|
Pomodoro timer |
4187 |
688 |
478 |
756 |
|
Keyboard |
4455 |
654 |
784 |
657 |
|
Manually |
784 |
784 |
621 |
157 |
|
Timeline |
884 |
254 |
105 |
356 |
|
Pomodoro |
356 |
884 |
465 |
644 |