Skip to content

Commit c96277f

Browse files
jsamrjsamr
committed
chore(demo): add wide table example
1 parent fcfd4b7 commit c96277f

File tree

1 file changed

+158
-134
lines changed

1 file changed

+158
-134
lines changed

‎example/HeuristicTableExample.js‎

Lines changed: 158 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ but it should be a good enough approximation for a majority of use cases.
105105
`;
106106

107107
const tableSpan = `
108-
109108
<h2>Table with colspan cell</h2>
110109
111110
<table>
@@ -177,143 +176,168 @@ const tableSpan = `
177176
</table>
178177
`;
179178

180-
const tableTest = `
181-
<table>
182-
<tbody>
183-
<tr>
184-
<td><u>Cinq étapes d'évaluation</u></td>
185-
<td><u>Critères de gravité</u></td>
186-
</tr>
187-
<tr>
188-
<td>1. Variables physiologiques</td>
189-
<td>GCS &lt; 13<br />PAS &lt; 90 mmHg<br />SpO<sub>2</sub> &lt; 90%</td>
190-
</tr>
191-
<tr>
192-
<td>2. Eléments de cinétique</td>
193-
<td>
194-
Éjection d'un véhicule<br />Autre passager décédé dans le même
195-
véhicule<br />Chute &gt; 6 m<br />Victime projetée ou écrasée<br />Appréciation
196-
globale (déformation du véhicule, vitesse estimée, absence de casque,
197-
absence de ceinture de sécurité)<br />Blast
198-
</td>
199-
</tr>
200-
<tr>
201-
<td>3. Lésions anatomiques</td>
202-
<td>
203-
Trauma pénétrant de la tête, du cou, du thorax, de l'abdomen, du bassin,
204-
du bras ou de la cuisse<br />Volet thoracique<br />Brûlure sévère,
205-
inhalation de fumée associée<br />Fracas du bassin<br />Suspicion
206-
d'atteinte médullaire<br />Amputation au niveau du poignet, de la
207-
cheville, ou au dessus<br />Ischémie aiguë de membre
208-
</td>
209-
</tr>
210-
<tr>
211-
<td>4. Réanimation préhospitalière</td>
212-
<td>
213-
Ventilation assistée<br />Remplissage &gt; 1000 ml de colloïdes<br />Catécholamines<br />Pantalon
214-
antichoc gonflé
215-
</td>
216-
</tr>
217-
<tr>
218-
<td>5. Terrain (à évaluer)</td>
219-
<td>
220-
Age &gt; 65 ans<br />Insuffisance cardiaque ou coronarienne<br />Insuffisance
221-
respiratoire<br />Grossesse (2<sup>ème</sup> et
222-
3<sup>ème</sup>trimestres)<br />Troubles de la crase sanguine
223-
</td>
224-
</tr>
225-
</tbody>
226-
</table>
227-
`;
228-
229-
const htmlTest3 = `
179+
const wideTable = `
180+
<h2>Wide table overflowing horizontaly</h2>
230181
<table
231182
id="example"
232183
class="display nowrap dataTable dtr-inline collapsed"
233184
role="grid"
234185
aria-describedby="example_info">
235-
<thead>
236-
<tr role="row">
237-
<th
238-
class="sorting sorting_asc"
239-
tabindex="0"
240-
aria-controls="example"
241-
rowspan="1"
242-
colspan="1"
243-
style="width: 104px"
244-
aria-sort="ascending"
245-
aria-label="Name: activate to sort column descending"
246-
>
247-
Name
248-
</th>
249-
<th
250-
class="sorting"
251-
tabindex="0"
252-
aria-controls="example"
253-
rowspan="1"
254-
colspan="1"
255-
style="width: 170px;"
256-
aria-label="Position: activate to sort column ascending"
257-
>
258-
Position
259-
</th>
260-
<th
261-
class="sorting"
262-
tabindex="0"
263-
aria-controls="example"
264-
rowspan="1"
265-
colspan="1"
266-
style="width: 76px;"
267-
aria-label="Office: activate to sort column ascending"
268-
>
269-
Office
270-
</th>
271-
<th
272-
class="dt-body-right sorting"
273-
tabindex="0"
274-
aria-controls="example"
275-
rowspan="1"
276-
colspan="1"
277-
style="width: 38px;"
278-
aria-label="Age: activate to sort column ascending"
279-
>
280-
Age
281-
</th>
282-
<th
283-
class="sorting"
284-
tabindex="0"
285-
aria-controls="example"
286-
rowspan="1"
287-
colspan="1"
288-
style="width: 67px;"
289-
aria-label="Start date: activate to sort column ascending"
290-
>
291-
Start date
292-
</th>
293-
<th
294-
class="dt-body-right sorting"
295-
tabindex="0"
296-
aria-controls="example"
297-
rowspan="1"
298-
colspan="1"
299-
style=""
300-
aria-label="Salary: activate to sort column ascending"
301-
>
302-
Salary
303-
</th>
304-
</tr>
305-
</thead>
306-
<tbody>
307-
<tr class="odd">
308-
<td tabindex="0" class="sorting_1">Airi Satou</td>
309-
<td style="">Accountant</td>
310-
<td style="">Tokyo</td>
311-
<td class="dt-body-right" style="">33</td>
312-
<td style="">2008/11/28</td>
313-
<td class="dt-body-right" style="">$162,700</td>
314-
</tr>
315-
</tbody>
316-
</table>`;
186+
<thead>
187+
<tr role="row">
188+
<th
189+
class="sorting sorting_asc"
190+
tabindex="0"
191+
aria-controls="example"
192+
rowspan="1"
193+
colspan="1"
194+
style="width: 104px"
195+
aria-sort="ascending"
196+
aria-label="Name: activate to sort column descending"
197+
>
198+
Name
199+
</th>
200+
<th
201+
class="sorting"
202+
tabindex="0"
203+
aria-controls="example"
204+
rowspan="1"
205+
colspan="1"
206+
style="width: 170px;"
207+
aria-label="Position: activate to sort column ascending"
208+
>
209+
Position
210+
</th>
211+
<th
212+
class="sorting"
213+
tabindex="0"
214+
aria-controls="example"
215+
rowspan="1"
216+
colspan="1"
217+
style="width: 76px;"
218+
aria-label="Office: activate to sort column ascending"
219+
>
220+
Office
221+
</th>
222+
<th
223+
class="dt-body-right sorting"
224+
tabindex="0"
225+
aria-controls="example"
226+
rowspan="1"
227+
colspan="1"
228+
style="width: 38px;"
229+
aria-label="Age: activate to sort column ascending"
230+
>
231+
Age
232+
</th>
233+
<th
234+
class="sorting"
235+
tabindex="0"
236+
aria-controls="example"
237+
rowspan="1"
238+
colspan="1"
239+
style="width: 110px;"
240+
aria-label="Start date: activate to sort column ascending"
241+
>
242+
Start date
243+
</th>
244+
<th
245+
class="dt-body-right sorting"
246+
tabindex="0"
247+
aria-controls="example"
248+
rowspan="1"
249+
colspan="1"
250+
style=""
251+
aria-label="Salary: activate to sort column ascending"
252+
>
253+
Salary
254+
</th>
255+
</tr>
256+
</thead>
257+
<tbody>
258+
<tr class="odd">
259+
<td tabindex="0" class="sorting_1">Airi Satou</td>
260+
<td style="">Accountant</td>
261+
<td style="">Tokyo</td>
262+
<td class="dt-body-right" style="">33</td>
263+
<td style="">2008/11/28</td>
264+
<td class="dt-body-right" >$162,700</td>
265+
</tr>
266+
<tr class="even">
267+
<td class="sorting_1" tabindex="0">Angelica Ramos</td>
268+
<td style="">Chief Executive Officer (CEO)</td>
269+
<td style="">London</td>
270+
<td class="dt-body-right" style="">47</td>
271+
<td style="">2009/10/09</td>
272+
<td class="dt-body-right" >$1,200,000</td>
273+
</tr>
274+
<tr class="odd">
275+
<td tabindex="0" class="sorting_1">Ashton Cox</td>
276+
<td style="">Junior Technical Author</td>
277+
<td style="">San Francisco</td>
278+
<td class="dt-body-right" style="">66</td>
279+
<td style="">2009/01/12</td>
280+
<td class="dt-body-right" >$86,000</td>
281+
</tr>
282+
<tr class="even">
283+
<td class="sorting_1" tabindex="0">Bradley Greer</td>
284+
<td style="">Software Engineer</td>
285+
<td style="">London</td>
286+
<td class="dt-body-right" style="">41</td>
287+
<td style="">2012/10/13</td>
288+
<td class="dt-body-right" >$132,000</td>
289+
</tr>
290+
<tr class="odd">
291+
<td class="sorting_1" tabindex="0">Brenden Wagner</td>
292+
<td style="">Software Engineer</td>
293+
<td style="">San Francisco</td>
294+
<td class="dt-body-right" style="">28</td>
295+
<td style="">2011/06/07</td>
296+
<td class="dt-body-right" >$206,850</td>
297+
</tr>
298+
<tr class="even">
299+
<td tabindex="0" class="sorting_1">Brielle Williamson</td>
300+
<td style="">Integration Specialist</td>
301+
<td style="">New York</td>
302+
<td class="dt-body-right" style="">61</td>
303+
<td style="">2012/12/02</td>
304+
<td class="dt-body-right" >$372,000</td>
305+
</tr>
306+
<tr class="odd">
307+
<td class="sorting_1" tabindex="0">Bruno Nash</td>
308+
<td style="">Software Engineer</td>
309+
<td style="">London</td>
310+
<td class="dt-body-right" style="">38</td>
311+
<td style="">2011/05/03</td>
312+
<td class="dt-body-right" >$163,500</td>
313+
</tr>
314+
<tr class="even">
315+
<td class="sorting_1" tabindex="0" style="outline: none">Caesar Vance</td>
316+
<td style="">Pre-Sales Support</td>
317+
<td style="">New York</td>
318+
<td class="dt-body-right" style="">21</td>
319+
<td style="">2011/12/12</td>
320+
<td class="dt-body-right" >$106,450</td>
321+
</tr>
322+
<tr class="odd">
323+
<td class="sorting_1" tabindex="0">Cara Stevens</td>
324+
<td style="">Sales Assistant</td>
325+
<td style="">New York</td>
326+
<td class="dt-body-right" style="">46</td>
327+
<td style="">2011/12/06</td>
328+
<td class="dt-body-right" >$145,600</td>
329+
</tr>
330+
<tr class="even">
331+
<td tabindex="0" class="sorting_1">Cedric Kelly</td>
332+
<td style="">Senior Javascript Developer</td>
333+
<td style="">Edinburgh</td>
334+
<td class="dt-body-right" style="">22</td>
335+
<td style="">2012/03/29</td>
336+
<td class="dt-body-right" >$433,060</td>
337+
</tr>
338+
</tbody>
339+
</table>
340+
`;
317341

318342
const htmlConfig = {
319343
renderers: tableRenderers,
@@ -367,7 +391,7 @@ export default function HeuristicTable({
367391
return (
368392
<RenderHTML
369393
key={`custom-${instance}`}
370-
source={{ html: htmlTest3 }}
394+
source={{ html: `${table1}${wideTable}${tableSpan}` }}
371395
onLinkPress={onLinkPress}
372396
contentWidth={availableWidth}
373397
enableExperimentalMarginCollapsing

0 commit comments

Comments
 (0)