Is your feature request related to a problem? Please describe.
I have an html table with several cell that has HTML, and multiple columns can be in different cells.
Right now with formatter() method seem that I can only format single column.
Describe the solution you'd like
I would like to be able to have single template like below semplified example using JSRender:
<script id="tableTamplate" type="text/x-jsrender">
<table id="myTable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Created</th>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td class="custom-class">{{:id}}</td>
<td>
<strong>{{:name}}</strong>
{{:username}} {{:role}}
</td>
<td class="another-class"><a href="mailto:{{:email}}">{{:email}}</a></td>
<td>{{:created_at}}</td>
<td><a href="{{:url_edit}}">Edit</a></td>
</tr>
</tbody>
</table>
Next I want create one single JS code that initialize my tables, where I pass variable via data attribute like URL, table template and other variable things.
// Semplified version
const el = document.querySelectorAll('[data-mygrid]');
let gridElement = el.getAttribute('data-mygrid');
let gridUrl = el.getAttribute('data-mygrid-url');
let gridColumns = JSON.parse(el.getAttribute('data-mygrid-columns'));
let templateId = el.getAttribute('data-mygrid-template');
const myGrid = new Grid({
columns: gridColumns,
server: {
headers: {
'Accept': 'application/json'
},
url: gridUrl,
then: data => data.data,
total: data => data.meta.total
},
// here add formatter() for all columns using template templateId
});
myGrid.render(document.getElementById(gridElement));
And last part thing below html that can be defined for each table:
<div
id="gridUsers"
data-mygrid="gridUsers"
data-mygrid-url="/users"
data-mygrid-columns='{{ json_encode(["id" => "ID", "url" => "URL", "name" => "Name", "email" => "Email", "username" => "Username", "created" => "Created", "updated" => "Updated"]) }}'></div>
Note that I am passing columns with key and value, where key is from JSON and value is title in header. Here is a working example where I define for each column separate template: https://gist.github.com/thewebartisan7/9bb0fa102b6337569b8879e2809e93d9
Additional context
Above is just a semplified version of table, but I have more complex html table see below screenshot, with checkbox for select many rows, details of a record with additional ro , so that in my case I will have two tr for each entry, example below in screenshot. I can't even define custom class for single cell (TD) right now, but only the same class for all, because I also use responsive classes for each cell to show/hide depending on screen size. Using single template I can define also different class for each cell and add complex html.
I hope that I explain well my usecase, please let me know if you need more info.
Thanks!
question wontfix
REs
7 Jul 31, 2022
63 Oct 20, 2022
58 Dec 30, 2022
1 Aug 24, 2021
50.9k Jan 1, 2023
1.7k Dec 20, 2022
10 May 14, 2022
9 May 14, 2022
2 May 31, 2022
2 Oct 29, 2022
11 Feb 15, 2022
21 Nov 22, 2022
2 Jun 4, 2022
11 Dec 17, 2022
14 Jun 14, 2022
29.4k Jan 4, 2023
167 Dec 9, 2022
774 Dec 24, 2022