Table Options
In addition to the features mentioned above Tabulator has a range of aditional options to help customise your table.
###Initial Data Sorting When data is loaded into the table it can be automatically sorted by a specified field
| Option | Data Type | Default Value | Description |
|---|---|---|---|
| sortBy | string | "id" | the name of the field to be sorted |
| sortDir | string | "DESC" | The direction of the sort (ASC or DESC). |
###Added Rows
| Option | Data Type | Default Value | Description |
|---|---|---|---|
| addRowPos | string | "bottom" | The position in the table for new rows to be added, "bottom" or "top" |
###Table Theming Tabulator allows you to set a number of global options that can help theme your table.
| Option | Data Type | Default Value | Description |
|---|---|---|---|
| backgroundColor | string | #888 | A valid css color(rgb,hex,etc...) for the background of the tabulator element |
| borderColor | string | #999 | A valid css color(rgb,hex,etc...) for the border of the tabulator element |
| textSize | int/string | 14 | the text size for all text in the tabulator |
| headerBackgroundColor | string | #e6e6e6 | A valid css color(rgb,hex,etc...) for the header cells |
| headerTextColor | string | #555 | A valid css color(rgb,hex,etc...) for the header cells text |
| headerBorderColor | string | #aaa | A valid css color(rgb,hex,etc...) for the header cells border |
| headerSeperatorColor | string | #999 | A valid css color(rgb,hex,etc...) for the header row bottom border |
| headerMargin | int/string | 4 | The size in pixels for the header cells margin |
| sortArrows | object | an object containing two options for theming the sorter arrows in the header (see next table) | |
| rowBackgroundColor | string | #fff | A valid css color(rgb,hex,etc...) for the background colour of the table rows |
| rowBorderColor | string | #fff | A valid css color(rgb,hex,etc...) for the table row borders |
| rowTextColor | string | #333 | A valid css color(rgb,hex,etc...) for the table row text |
| rowHoverBackground | string | #bbb | A valid css color(rgb,hex,etc...) for the table row background when hovered over. |
| editBoxColor | string | #1D68CD | A valid css color(rgb,hex,etc...) for border of a cell being edited. |
#####Sort Arrow Theming The sortArrows option contains two options
| Option | Data Type | Default Value | Description |
|---|---|---|---|
| active | string | #666 | A valid css color(rgb,hex,etc...) for the sorter arrow on currently sorted column |
| inactive | string | #bbb | A valid css color(rgb,hex,etc...) for the sorter arrow on unsorted column |
###Table Size
| Option | Data Type | Default Value | Description |
|---|---|---|---|
| height | string/int | false | Sets the height of the containing element, can be set to any valid height css value. If set to false (the default), the height of the table will resize to fit the table data. |
###Data Loaders When loading data, Tabulator can display a loading overlay over the table. This consists of a modal background and a loader element. The loader element can be set globally in the options and should be specified as a div with a display style of inline-block.
| Option | Data Type | Default Value | Description |
|---|---|---|---|
| showLoader | boolean | true | Show loader while data is loading |
| loader | string | html (see below) | html for loader element |
| loaderError | string | html (see below) | html for the loader element in the event of an error |
#####Default loader element
<div style='display:inline-block; border:4px solid #333; border-radius:10px; background:#fff; font-weight:bold; font-size:16px; color:#000; padding:10px 20px;'>Loading Data</div>#####Default loader error element
<div style='display:inline-block; border:4px solid #D00; border-radius:10px; background:#fff; font-weight:bold; font-size:16px; color:#590000; padding:10px 20px;'>Loading Error</div>