@@ -30,75 +30,70 @@ The full list of options is below. Simple options can be specified as `data-` at
-`title`: for header display. Defaults to the same value as `name`
-`type`: `text` (default) / `number` / `date`. Data type. Determines filters to be used
-`format`: string / function that returns formatted cell display value.
- function accepts an object with these keys:
-`name`: column name
-`value`: cell data value
-`row`: row data
-`index`: row index
-`data`: the dataset from `src`
- strings specify a numeral.js format if the value is a number (you must include numeral.js)
- strings specify a moment.js format if the value is a date (you must include moment.js)
-`editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row.
- To bind UI input element such as dropdown, datepicker, radio etc., `editable` accepts an object with these keys.
- function accepts an object with these keys:
-`name`: column name
-`value`: cell data value
-`row`: row data
-`index`: row index
-`data`: the dataset from `src`
- strings specify a numeral.js format if the value is a number (you must include numeral.js)
- strings specify a moment.js format if the value is a date (you must include moment.js)
-`editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row. To bind UI input element such as dropdown, datepicker, radio etc., `editable` accepts an object with these keys.
-`input`: **Mandatory**. The type of input element to use. The valid values are checkbox, radio, range, select, and any other legal [HTML form input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-`options`: An array of options to select from. **Mandatory** if `input` is either of `select` or `radio`
-`attrs`: To place common attributes such as max, min, placeholder, name etc., on the `input` element.
Example:
`input: 'number', attrs: {step: 10, placeholder: '0 - 1000', name: 'some_name'}` would render as
- If `link:` is a string, opens a new window with the string URL interpolated as a lodash template with an object (mentioned above) as data.
Example: `"https://example.org/city/<%- value >"`
-`hideable`: `true` (default) / `false`. Show or hide `Hide` option in header dropdown
-`hide`: `true` / `false` (default). Hides the column
-`unique`: list of values. Adds a list of checkboxes of unique values to filter on, in the column header dropdown.
-`edit`: Shows the Edit control. Can be `true` / `false` (default). Can also pass an object.
-`done`: function that gets called after saving the edited row.
-`done`: function that gets called after saving the edited row.
-`add`: Show the Add control. Can be `true` / `false` (default). Can also pass an object.
-`done`: function that gets called after saving the new row.
-`done`: function that gets called after saving the new row.
-`actions`: A list of objects. you need not add it to actions
-`{{action}}`: a function() that gets triggered on clicking the element with `data-action='{{action}}` attribute. The value of `data-action` attribute must match with key `{{action}}` in `actions`.
- function accepts an object with these keys:
-`row`: row data
-`index`: index of the row in the dataset from `src`
-`notify(message)`: a function that shows a notification
- If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
-`highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
- Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
-`{{action}}`: a function() that gets triggered on clicking the element with `data-action='{{action}}` attribute. The value of `data-action` attribute must match with key `{{action}}` in `actions`.
- function accepts an object with these keys:
-`row`: row data
-`index`: index of the row in the dataset from `src`
-`notify(message)`: a function that shows a notification
- If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
-`highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
- Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
-`onhashchange`: `true` re-renders table on hashchange based on filters in URL
hash. Set `false` to disable listening to hashchange (default `true`)
-`table`: Shows the table control. Can be:
-`true`: displays a table (default)
-`'grid'`: renders a grid instead of a table
-`false`: disables the table (and shows nothing for the main content)
-`true`: displays a table (default)
-`'grid'`: renders a grid instead of a table
-`false`: disables the table (and shows nothing for the main content)
-`count`: Shows the number of rows. Can be `true` (default) / `false`
-`page`: Shows the page control. Can be `true` (default) / `false`.
-`pageSize`: page size. Defaults to 100
...
...
@@ -115,13 +110,13 @@ The full list of options is below. Simple options can be specified as `data-` at
- returns a dict with modified values of `data` and `meta`
-`icon`: if `table: 'grid'` is used, display an icon. string / function that renders the cell.
- function accepts an object with these keys:
-`row`: row data
-`data`: the dataset from `src`
-`index`: index of the row in the dataset from `src`
Example:
-`icon: 'fa fa-home fa-3x'` renders a FontAwesome home icon
-`icon: './path/to/image.png'` renders the image specified
-`icon: function(args) { return args.row['image_link'] }` renders an image with `src` attribute as the value from column name `image_link`
-`row`: row data
-`data`: the dataset from `src`
-`index`: index of the row in the dataset from `src`
-Example:
-`icon: 'fa fa-home fa-3x'` renders a FontAwesome home icon
-`icon: './path/to/image.png'` renders the image specified
-`icon: function(args) { return args.row['image_link'] }` renders an image with `src` attribute as the value from column name `image_link`
**Advanced**. Each component can have a target which specifies a selector. For
e.g., to render the export button somewhere else, use
...
...
@@ -141,6 +136,7 @@ targets are:
`data-search-template="<input type='search'>"` will replace the search template
with a simple input. Available template strings are:
-`tableTemplate`
-`table_gridTemplate`
-`countTemplate`
-`pageTemplate`
-`sizeTemplate`
...
...
@@ -174,7 +170,7 @@ Features to be implemented:
## $.formhandler examples
Render a table using the FormHandler at `./data`:
### Render from a FormHandler
```html
<divclass="formhandler"data-src="./data"></div>
...
...
@@ -183,22 +179,20 @@ Render a table using the FormHandler at `./data`:
</script>
```
Get data inside formhandler table:
### Access data inside formhandler
```html
<divclass="formhandler"data-src="./data"></div>
<script>
$('.formhandler')
.on('load',function(formdata,meta,args,options){
console.log('data inside formhandler table: ',formdata)// gives data loaded in to formhandler table
