Skip to content

Commit 87dd116

Browse files
johanneswilmjohanneswilm
committed
Merge branch 'main' of github.com:fiduswriter/Simple-DataTables
2 parents 8b0700b + 14d4996 commit 87dd116

File tree

19 files changed

+3816
-107
lines changed

19 files changed

+3816
-107
lines changed

‎docs/demos/32-colspan/index.html‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
7+
<title>Colspan Support - simple-datatables</title>
8+
<!-- DataTable Styles -->
9+
<link rel="stylesheet" href="../dist/css/style.css">
10+
<!-- Demo Styles -->
11+
<link rel="stylesheet" href="../demo.css">
12+
<style>
13+
.demo-section {
14+
margin: 40px 0;
15+
padding: 20px;
16+
border: 1px solid #e0e0e0;
17+
border-radius: 4px;
18+
background-color: #f9f9f9;
19+
}
20+
.demo-section h3 {
21+
margin-top: 0;
22+
color: #333;
23+
}
24+
.code-example {
25+
background-color: #fff;
26+
padding: 15px;
27+
border-left: 4px solid #4CAF50;
28+
margin: 20px 0;
29+
overflow-x: auto;
30+
}
31+
.code-example pre {
32+
margin: 0;
33+
}
34+
.note {
35+
background-color: #fff3cd;
36+
border-left: 4px solid #ffc107;
37+
padding: 10px 15px;
38+
margin: 15px 0;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<header>
44+
<h1>
45+
<a href="../../">simple-datatables</a>
46+
</h1>
47+
<a href="../../documentation">Documentation</a>
48+
<a href="../">Demos</a>
49+
</header>
50+
51+
<h2>Colspan Support</h2>
52+
53+
<p>
54+
Simple-datatables supports colspan attributes in table cells, allowing cells to span multiple columns.
55+
This works for both tables loaded from HTML and data loaded from JSON/JavaScript.
56+
</p>
57+
58+
<div class="demo-section">
59+
<h3>Example 1: Colspan from HTML Table</h3>
60+
<p>
61+
When initializing from an existing HTML table, colspan attributes are automatically preserved.
62+
</p>
63+
64+
<table id="html-table">
65+
<thead>
66+
<tr>
67+
<th>ID</th>
68+
<th>First Name</th>
69+
<th>Last Name</th>
70+
<th>Department</th>
71+
<th>Email</th>
72+
</tr>
73+
</thead>
74+
<tbody>
75+
<tr>
76+
<td>1</td>
77+
<td colspan="2">John Doe</td>
78+
<td>Engineering</td>
79+
<td>[email protected]</td>
80+
</tr>
81+
<tr>
82+
<td>2</td>
83+
<td>Jane</td>
84+
<td>Smith</td>
85+
<td colspan="2">Marketing - [email protected]</td>
86+
</tr>
87+
<tr>
88+
<td>3</td>
89+
<td>Bob</td>
90+
<td>Johnson</td>
91+
<td>Sales</td>
92+
<td>[email protected]</td>
93+
</tr>
94+
<tr>
95+
<td colspan="3">Alice Williams (Former Employee)</td>
96+
<td>HR</td>
97+
<td>[email protected]</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
</div>
102+
103+
<div class="demo-section">
104+
<h3>Example 2: Colspan from JSON/JavaScript Data</h3>
105+
<p>
106+
When loading data programmatically, you can specify colspan by including an <code>attributes</code> object in your cell data.
107+
</p>
108+
109+
<div class="code-example">
110+
<pre>const data = {
111+
headings: ["ID", "Name", "Department", "Email", "Phone"],
112+
data: [
113+
{
114+
cells: [
115+
"1",
116+
{
117+
data: "Full Name Here",
118+
attributes: { colspan: "2" } // Spans 2 columns
119+
},
120+
"[email protected]",
121+
"555-1234"
122+
]
123+
}
124+
]
125+
};</pre>
126+
</div>
127+
128+
<table id="json-table"></table>
129+
130+
<div class="note">
131+
<strong>Note:</strong> When using colspan, the total number of cells (including the colspan value) must match the number of headings.
132+
</div>
133+
</div>
134+
135+
<div class="demo-section">
136+
<h3>Example 3: Advanced Colspan Usage</h3>
137+
<p>
138+
This example demonstrates more complex colspan scenarios, including cells spanning different numbers of columns.
139+
</p>
140+
141+
<table id="advanced-table"></table>
142+
</div>
143+
144+
<div class="demo-section">
145+
<h3>Example 4: Colspan in Data Rows</h3>
146+
<p>
147+
This example shows colspan used in regular data cells (heading colspan support coming soon).
148+
</p>
149+
150+
<table id="heading-colspan-table"></table>
151+
</div>
152+
153+
<script type="module">
154+
import {DataTable} from "../dist/module.js"
155+
156+
// Example 1: HTML table with colspan
157+
window.htmlTable = new DataTable("#html-table", {
158+
searchable: true,
159+
sortable: true,
160+
perPage: 5
161+
})
162+
163+
// Example 2: JSON data with colspan
164+
const jsonData = {
165+
headings: ["ID", "Name", "Department", "Email", "Phone"],
166+
data: [
167+
{
168+
cells: [
169+
"1",
170+
{
171+
data: "John Doe (Full Name)",
172+
attributes: {
173+
colspan: "2"
174+
}
175+
},
176+
"[email protected]",
177+
"555-0101"
178+
]
179+
},
180+
{
181+
cells: [
182+
"2",
183+
"Jane Smith",
184+
"Marketing",
185+
{
186+
data: "[email protected] / 555-0102",
187+
attributes: {
188+
colspan: "2"
189+
}
190+
}
191+
]
192+
},
193+
[
194+
"3",
195+
"Bob Johnson",
196+
"Sales",
197+
"[email protected]",
198+
"555-0103"
199+
],
200+
{
201+
cells: [
202+
"4",
203+
"Alice Brown",
204+
{
205+
data: "HR Department",
206+
attributes: {
207+
colspan: "3"
208+
}
209+
}
210+
]
211+
}
212+
]
213+
}
214+
215+
window.jsonTable = new DataTable("#json-table", {
216+
data: jsonData,
217+
searchable: true,
218+
sortable: true,
219+
perPage: 5
220+
})
221+
222+
// Example 3: Advanced colspan usage
223+
const advancedData = {
224+
headings: ["Week", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
225+
data: [
226+
{
227+
cells: [
228+
"Week 1",
229+
"Meeting",
230+
{
231+
data: "Conference (2 days)",
232+
attributes: {
233+
colspan: "2"
234+
}
235+
},
236+
"Development",
237+
"Code Review"
238+
]
239+
},
240+
{
241+
cells: [
242+
"Week 2",
243+
{
244+
data: "Team Building Event (All Week)",
245+
attributes: {
246+
colspan: "5"
247+
}
248+
}
249+
]
250+
},
251+
{
252+
cells: [
253+
"Week 3",
254+
"Sprint Planning",
255+
"Development",
256+
"Development",
257+
{
258+
data: "Demo & Retrospective",
259+
attributes: {
260+
colspan: "2"
261+
}
262+
}
263+
]
264+
},
265+
[
266+
"Week 4",
267+
"Development",
268+
"Development",
269+
"Development",
270+
"Testing",
271+
"Deployment"
272+
]
273+
]
274+
}
275+
276+
window.advancedTable = new DataTable("#advanced-table", {
277+
data: advancedData,
278+
searchable: true,
279+
perPage: 10
280+
})
281+
282+
// Example 4: Colspan in headings
283+
const headingColspanData = {
284+
headings: [
285+
"Product",
286+
"Jan Sales",
287+
"Feb Sales",
288+
"Mar Sales",
289+
"Apr Sales",
290+
"May Sales",
291+
"Jun Sales"
292+
],
293+
data: [
294+
[
295+
"Widget A",
296+
"$1000",
297+
"$1200",
298+
"$1500",
299+
"$1300",
300+
"$1400",
301+
"$1600"
302+
],
303+
[
304+
"Widget B",
305+
"$800",
306+
"$900",
307+
"$1100",
308+
"$950",
309+
"$1050",
310+
"$1200"
311+
],
312+
{
313+
cells: [
314+
"Widget C",
315+
{
316+
data: "Product Discontinued in Q1",
317+
attributes: {
318+
colspan: "3"
319+
}
320+
},
321+
{
322+
data: "N/A",
323+
attributes: {
324+
colspan: "3"
325+
}
326+
}
327+
]
328+
}
329+
]
330+
}
331+
332+
window.headingColspanTable = new DataTable("#heading-colspan-table", {
333+
data: headingColspanData,
334+
searchable: false,
335+
perPage: 10
336+
})
337+
</script>
338+
</body>
339+
</html>

0 commit comments

Comments
 (0)