Example data for 'rowspan' #1128
Description
Hey there,
I am aware of #252 and tried to implement rowspan in a shift planning tool - every day (eg 'Monday') spans two rows, resembling different shifts, each being assigned to someone:
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script type="module">
import { Grid, html } from "https://unpkg.com/gridjs?module";
const grid = new Grid({
columns: [
{
name: 'Date',
attributes: {
'rowspan': 2
}
},
{
name: 'Weekday',
attributes: {
'rowspan': 2
}
},
'Shift',
'Assigned'
],
data: [
{
date: '20.12.2022',
weekday: 'Monday',
shift: 'morning',
assigned: 'some1, some3',
},
{
shift: 'afternoon',
assigned: 'some1, some2',
},
{
date: '21.11.2022',
weekday: 'Tuesday',
shift: 'morning',
assigned: 'some1, some2',
},
{
shift: 'afternoon',
assigned: 'some2',
},
],
}).render(document.getElementById('wrapper'));
</script>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>Now, when adding my data, using a data attribute rowspan works, but the data is being partly displayed outside the table:
I tried using arrays of various kinds as data for fields date and weekday, but nothing worked 😞 Looking for something in your source, the only usable thing is a jest snapshot, which renders like this (= same problem):
Could you add an example showing the use of colspan/rowspan? As this doesn't seem intuitive, it could also serve as an 'example' in the docs - I could provide a PR if only I knew how it's done 😅
Cheers
S1SYPHOS
PS: I also found #893 - but it wasn't answered ..