Commit 0d1978a5 authored by Tejesh's avatar Tejesh 🖖
Browse files

add headerClass option

parent c86de2b4
Pipeline #52324 failed with stage
in 1 minute and 33 seconds
......@@ -555,6 +555,10 @@ The full list of options is below. Simple options can be specified as `data-` at
- `export`: Shows the export control. Can be `true` (default) / `false`
- `exportFormats`: {xlsx: 'Excel'}
- `filters`: Shows the applied filters control. Can be `true` (default) / `false`
- `headerOptions`: Shows options for each header column (like sorting, hide, contains etc.). Can be `true` (default) or `false`
- `headerClasses`: string / function that attaches a class to the `<th>` element. function accepts a dict that has keys:
- `name`: column name
- `data`: the FormHandler data
- `transform`: an optional function() that modifies data. It accepts a dict that has keys:
- `data`: the FormHandler data
- `meta`: the FormHandler metadata from the `FH-*` HTTP headers
......
......@@ -6,7 +6,7 @@ import { parse } from './url.js'
import { namespace } from './namespace_util.js'
// Render components in this order. The empty component is the root component.
var components = ['', 'table', 'edit', 'add', 'page', 'size', 'count', 'export', 'filters', 'error', 'header_options', 'table_grid']
var components = ['', 'table', 'edit', 'add', 'page', 'size', 'count', 'export', 'filters', 'error', 'headerOptions', 'headerClasses', 'table_grid']
var default_options = {
table: true,
edit: false,
......@@ -17,7 +17,8 @@ var default_options = {
sizeValues: [10, 20, 50, 100, 500, 1000],
count: true,
export: true,
header_options: true,
headerOptions: true,
headerClasses: true,
exportFormats: {
xlsx: 'Excel',
csv: 'CSV',
......
......@@ -65,20 +65,24 @@ Each template receives these variables:
var cols = options.columns.length ? filtered_cols : meta.columns;
cols = cols.filter(function(col) { return col.hide !== true})
var form_id = idcount;
var dropdown = (options.header_options == false ? '' : 'dropdown');
var dropdown_toggle = (options.header_options == false ? '' : 'dropdown-toggle');
var dropdown = (options.headerOptions === false ? '' : 'dropdown');
var dropdown_toggle = (options.headerOptions === false ? '' : 'dropdown-toggle');
%>
<table class="table table-sm table-striped">
<thead>
<% _.each(cols, function(colinfo) {
col_defaults(colinfo, data)
var menu_item = false
var col_id = idcount++
var col_id = idcount++;
if (typeof(options.headerClasses) == 'function') {
var header_class = options.headerClasses({name: colinfo.name, data:data })
console.log("name", name, header_class)
}
%>
<th class="<%- args['_sort'] == colinfo.name ? 'table-primary' : args['_sort'] == '-' + colinfo.name ? 'table-danger' : '' %>"
data-col="<%- colinfo.name %>">
<div class="dropdown">
<a href="#" class="<%- dropdown_toggle %> text-nowrap"
<a href="#" class="<%- dropdown_toggle %> text-nowrap <%- header_class %>"
id="fh-dd-<%- col_id %>"
data-toggle="<%- dropdown %>"
aria-haspopup="true"
......
......@@ -64,7 +64,9 @@
}
}
],
// header_options: false
headerOptions: true,
// headerClasses: 'bg-secondary'
headerClasses: function(arg) {console.log(arg.name); return arg.name == 'city' ? 'bg-primary' : ''}
}).on('load', function () {
// if arg.name was accessible, then any of rects rendered wont have black color as fill
// debugger
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment