Commit ee1c21ee authored by Tejesh's avatar Tejesh 🖖

DOC: Add formhandler table more examples (interactive) documentaion

parent 193f8778
Pipeline #78719 passed with stage
in 2 minutes and 21 seconds
......@@ -2,10 +2,11 @@
An interactive table component for [FormHandler][formhandler] data.
<!-- render:html -->
```html
<div class="formhandler" data-src="formhandler-url" data-page-size="10"></div>
<div class="formhandler-default" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json" data-page-size="5"></div>
<script>
$('.formhandler').formhandler({
$('.formhandler-default').formhandler({
pageSize: 20
})
</script>
......@@ -108,7 +109,7 @@ The full list of options is below. Simple options can be specified as `data-` at
- `args`: the URL query parameters passed to the FormHandler
- `options`: the options applicable to the FormHandler
- 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.
- `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`
......@@ -170,19 +171,13 @@ Features to be implemented:
## $.formhandler examples
### Render from a FormHandler
```html
<div class="formhandler" data-src="./data"></div>
<script>
$('.formhandler').formhandler()
</script>
```
### Access data inside formhandler
<!-- render:html -->
```html
<div class="formhandler" data-src="./data"></div>
// check in Dev tools Console for data inside formhandler table
<div class="formhandler" data-page-size="3" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json"></div>
<script>
$('.formhandler')
.on('load', function(data, meta, args, options) {
......@@ -192,27 +187,151 @@ Features to be implemented:
</script>
```
## Draw chart in cell
### Customize just a few columns using `'*'`. Show only few columns
<!-- render:html -->
```html
<div class="formhandler" data-src="./data"></div>
<div class="formhandler-custom-cols" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json"></div>
<script>
$('.formhandler').formhandler({
$('.formhandler-custom-cols').formhandler({
pageSize: 4,
columns: [
{name: '*'},
{ name: '*', hide: true},
{
name: 'ID',
hide: false
},
{
name: 'c1',
format: function (o) {
return '<svg height="10" width="10"><circle cx="5" cy="5" r="' + o.c1 / 10 + '" fill="red"></circle></svg>'
hide: false
}
]
})
</script>
```
### Draw chart in cell
<!-- render:html -->
```html
<div class="formhandler-cell-chart" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json"></div>
<script>
$('.formhandler-cell-chart').formhandler({
pageSize: 4,
columns: [
{
name: '*'
},
{
name: 'c1',
format: function (args) {
return '<svg height="10" width="10"><circle cx="5" cy="5" r="' + (args.row.c1 / 10) + '" fill="red"></circle></svg>'
}
}
}
]
})
</script>
```
### Render date type column using MomentJS format strings:
```html
<div class="formhandler-dateformat"></div>
<script>
$('.formhandler-dateformat').formhandler({
pageSize: 4,
data: "../test/formhandler_csv.json", // render using JSON data file as source
columns: [
{
name: 'date col',
type: 'date',
format: 'DD MMM YYYY' // 30-12-2018 renders as 30 Dec 2018
}
]
})
</script>
```
### Render FormHandler table with a JSON dataset (not a FormHandler URL)
<!-- render:html -->
```html
<div class="formhandler-json"></div>
<script>
$.get('https://jsonplaceholder.typicode.com/posts')
.done(function (response) {
$('.formhandler-json').formhandler({
data: response,
pageSize: 5
})
})
</script>
```
### Open links in a new window
<!-- render:html -->
```html
<div class="formhandler-links"></div>
<script>
$('.formhandler-links').formhandler({
src: 'https://learn.gramener.com/guide/formhandler/flags?_format=cors-json',
columns: [
{
name: 'ID',
link: 'https://en.wikipedia.org/wiki/<%= row.ID %>'
}
],
pageSize: 5
})
</script>
```
### Add custom actions
<!-- render:html -->
```html
<div class="formhandler-links"></div>
<script>
$('.formhandler-links').formhandler({
src: 'https://learn.gramener.com/guide/formhandler/flags?_format=cors-json',
pageSize: 4,
columns: [
{
name: '*'
},
{
name: 'Approval Actions',
template: function(args) {
return `<td><i class="fa fa-lg mr-2 cursor-pointer fa-check-circle" data-action="reset_password"></i></td>`
}
}
],
actions: [{
'reset_password': function (obj) {
var data = obj.row
if(obj.row['Approval'] == 'Approved'){
data['Approval'] = 'Not Approved'
}else if(obj.row['Approval'] != 'Disapproved') {
data['Approval'] = 'Approved'
}
return $.ajax({url: 'user_approval', method: 'POST', data: data })
.done(function() { obj.notify('Approved user Successfully!')})
.fail(function() { obj.notify('Unable to approve user') })
}
}]
})
</script>
```
### Customize inputs in edit mode
<!-- render:html -->
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
......@@ -220,9 +339,11 @@ Features to be implemented:
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<div class="edit-fh" data-src="./data"></div>
<div class="edit-fh" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json"></div>
<script>
$('.edit-fh').formhandler({
edit: true,
pageSize: 4,
columns: [
{
name: 'ID',
......@@ -294,3 +415,60 @@ Features to be implemented:
})
</script>
```
### Create editable tables with radio buttons
<!-- render:html -->
```html
<div class="edit-fh-radio" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json"></div>
<script>
$('.edit-fh-radio').formhandler({
pageSize: 4,
edit: true,
columns: [
{
name: 'ID',
editable: false // Disable edit for column "ID" because it is a primary key and cannot be edited.
},
{
name: 'Shapes',
editable: {
input: 'radio', // renders radio buttons
options: [ // `options` is mandatory because `input` is `"radio"`
'Circle',
'Crescent',
'Triangle',
'Stars'
],
attrs: {
name: 'shapes'
}
}
}
]
})
</script>
```
### Create a grid instead of a table
<!-- render:html -->
```html
<div class="formhandler-grid" data-src="https://learn.gramener.com/guide/formhandler/flags?_format=cors-json"></div>
<script>
$('.formhandler-grid').formhandler({
table: 'grid', // Render as Grid layout
pageSize: 5,
columns: [
{
name: 'ID',
link: 'https://en.wikipedia.org/wiki/<%= row.ID %>'
},
{
name: '*'
}
]
})
</script>
```
\ No newline at end of file
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