Skip to content

Commit

Permalink
[v2] Fix table render (#5596)
Browse files Browse the repository at this point in the history
  • Loading branch information
@deleonio
deleonio committed Nov 15, 2023
2 parents ef3e2a8 + 6b8848f commit e1c06fa
Show file tree
Hide file tree
Showing 11 changed files with 74 additions and 55 deletions.
22 changes: 13 additions & 9 deletions packages/components/src/components/table/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,7 +485,7 @@ export class KolTable implements API {
this.state._data
);
if (typeof html === 'string') {
el.innerHTML = html;
el.textContent = html;
}
})
);
Expand Down Expand Up @@ -556,9 +556,10 @@ export class KolTable implements API {
'w-full': true,
[headerCell.textAlign as string]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,
}}
innerHTML={headerCell.label}
style={{ textAlign: headerCell.textAlign }}
></div>
>
{headerCell.label}
</div>
{!this.disableSort && typeof headerCell.sort === 'function' && (
<kol-button
exportparts="icon"
Expand Down Expand Up @@ -609,8 +610,9 @@ export class KolTable implements API {
}
: undefined
}
innerHTML={typeof cell.render !== 'function' ? cell.label : ''}
></td>
>
{typeof cell.render !== 'function' ? cell.label : ''}
</td>
);
}
};
Expand Down Expand Up @@ -687,8 +689,9 @@ export class KolTable implements API {
}
: undefined
}
innerHTML={typeof col.render !== 'function' ? col.label : ''}
></td>
>
{typeof col.render !== 'function' ? col.label : ''}
</td>
);
} else {
const headerCell: KoliBriTableHeaderCell = col;
Expand Down Expand Up @@ -725,11 +728,12 @@ export class KolTable implements API {
'w-full': true,
[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
}}
innerHTML={col.label}
style={{
textAlign: col.textAlign,
}}
></div>
>
{col.label}
</div>
{!this.disableSort && typeof headerCell.sort === 'function' && (
<kol-button
exportparts="icon"
Expand Down
24 changes: 18 additions & 6 deletions packages/samples/react/src/components/handout/basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
{
key: 'dienstag',
label: 'Dienstag',
render: (el, data) => (el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`),
render: (el, data) => {
el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
},
sort: (data) => {
return data.sort((first, second) => {
if (first.dienstag < second.dienstag) {
Expand All @@ -100,27 +102,37 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
{
key: 'mittwoch',
label: 'Mittwoch',
render: (el, data) => (el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`),
render: (el, data) => {
el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
},
},
{
key: 'donnerstag',
label: 'Donnerstag',
render: (el, data) => (el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`),
render: (el, data) => {
el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
},
},
{
key: 'freitag',
label: 'Freitag',
render: (el, data) => (el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`),
render: (el, data) => {
el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
},
},
{
key: 'samstag',
label: 'Samstag',
render: (el, data) => (el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`),
render: (el, data) => {
el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
},
},
{
key: 'sonntag',
label: 'Sonntag',
render: (el, data) => (el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`),
render: (el, data) => {
el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
},
},
],
],
Expand Down
5 changes: 4 additions & 1 deletion packages/samples/react/src/components/table/render-cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ const HEADERS: KoliBriTableHeaders = {
label: 'Datum (string)',
key: 'date',
textAlign: 'center',
render: (_el, _cell, tupel) => `<strong>${DATE_FORMATTER.format((tupel as Data).date)}</strong>`,
render: (el, tupel) => {
// https://reactjs.org/docs/portals.html
getRoot(el).render(<strong>{DATE_FORMATTER.format((tupel as Data).date)}</strong>);
},
sort: (data: Data[]) =>
data.sort((data0, data1) => {
if (data0.date < data1.date) return -1;
Expand Down
32 changes: 16 additions & 16 deletions packages/samples/react/src/components/table/test-data.ts
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,66 @@
export type Data = {
order: number;
date: Date;
date: String;
};
export const DATA: Data[] = [
{
order: 0,
date: new Date('1981-05-26T21:33:43.612Z'),
date: new Date('1981-05-26T21:33:43.612Z').toString(),
},
{
order: 1,
date: new Date('1971-04-25T19:44:17.014Z'),
date: new Date('1971-04-25T19:44:17.014Z').toString(),
},
{
order: 2,
date: new Date('1986-07-10T11:39:29.539Z'),
date: new Date('1986-07-10T11:39:29.539Z').toString(),
},
{
order: 3,
date: new Date('1976-02-02T10:00:36.346Z'),
date: new Date('1976-02-02T10:00:36.346Z').toString(),
},
{
order: 4,
date: new Date('1998-07-07T12:50:36.016Z'),
date: new Date('1998-07-07T12:50:36.016Z').toString(),
},
{
order: 5,
date: new Date('1994-09-05T05:10:44.078Z'),
date: new Date('1994-09-05T05:10:44.078Z').toString(),
},
{
order: 6,
date: new Date('1986-05-23T13:05:01.874Z'),
date: new Date('1986-05-23T13:05:01.874Z').toString(),
},
{
order: 7,
date: new Date('1975-06-29T21:51:29.359Z'),
date: new Date('1975-06-29T21:51:29.359Z').toString(),
},
{
order: 8,
date: new Date('1974-05-15T23:47:02.499Z'),
date: new Date('1974-05-15T23:47:02.499Z').toString(),
},
{
order: 9,
date: new Date('1990-05-27T10:13:19.641Z'),
date: new Date('1990-05-27T10:13:19.641Z').toString(),
},
{
order: 10,
date: new Date('1993-10-20T03:54:08.739Z'),
date: new Date('1993-10-20T03:54:08.739Z').toString(),
},
{
order: 11,
date: new Date('2000-02-25T11:55:43.705Z'),
date: new Date('2000-02-25T11:55:43.705Z').toString(),
},
{
order: 12,
date: new Date('1988-08-27T09:59:12.251Z'),
date: new Date('1988-08-27T09:59:12.251Z').toString(),
},
{
order: 13,
date: new Date('1980-10-24T10:41:24.897Z'),
date: new Date('1980-10-24T10:41:24.897Z').toString(),
},
{
order: 14,
date: new Date('1995-01-25T12:31:27.983Z'),
date: new Date('1995-01-25T12:31:27.983Z').toString(),
},
];
46 changes: 23 additions & 23 deletions packages/samples/react/src/scenarios/complex-form/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,48 +40,48 @@ export const TerminComponent: FC = () => (
</div>
<div className="grid sm:grid-cols-1 gap-2">
<KolTable
_caption="Öffnungszeiten"
_label="Öffnungszeiten"
_data={
[
{
stadtteil: 'Brackel',
montag: '08:00 - 12:00<br/>14:00 - 16:00',
dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
montag: '08:00 - 12:00, 14:00 - 16:00',
dienstag: '08:00 - 12:00, 14:00 - 15:00',
mittwoch: '08:00 - 12:00, 14:00 - 15:00',
donnerstag: '08:00 - 12:00, 14:00 - 18:00',
freitag: '08:00 - 12:00',
},
{
stadtteil: 'Dorstfeld',
montag: '09:00 - 12:00<br/>14:00 - 16:00',
dienstag: '09:00 - 12:00<br/>14:00 - 15:00',
mittwoch: '09:00 - 12:00<br/>14:00 - 15:00',
donnerstag: '09:00 - 12:00<br/>14:00 - 18:00',
montag: '09:00 - 12:00, 14:00 - 16:00',
dienstag: '09:00 - 12:00, 14:00 - 15:00',
mittwoch: '09:00 - 12:00, 14:00 - 15:00',
donnerstag: '09:00 - 12:00, 14:00 - 18:00',
freitag: '09:00 - 12:00',
},
{
stadtteil: 'Aplerbeck',
montag: '08:00 - 12:00<br/>14:00 - 16:00',
dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
montag: '08:00 - 12:00, 14:00 - 16:00',
dienstag: '08:00 - 12:00, 14:00 - 15:00',
mittwoch: '08:00 - 12:00, 14:00 - 15:00',
donnerstag: '08:00 - 12:00, 14:00 - 18:00',
freitag: '08:00 - 12:00',
},
{
stadtteil: 'Innenstadt Ost',
montag: '07:00 - 12:00<br/>14:00 - 16:00',
dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
freitag: '07:00 - 12:00<br/>13:00 - 16:00',
montag: '07:00 - 12:00, 14:00 - 16:00',
dienstag: '07:00 - 12:00, 14:00 - 15:00',
mittwoch: '07:00 - 12:00, 14:00 - 15:00',
donnerstag: '07:00 - 12:00, 14:00 - 18:00',
freitag: '07:00 - 12:00, 13:00 - 16:00',
},
{
stadtteil: 'Innenstadt West',
montag: '07:00 - 12:00<br/>14:00 - 16:00',
dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
freitag: '07:00 - 12:00<br/>13:00 - 16:00',
montag: '07:00 - 12:00, 14:00 - 16:00',
dienstag: '07:00 - 12:00, 14:00 - 15:00',
mittwoch: '07:00 - 12:00, 14:00 - 15:00',
donnerstag: '07:00 - 12:00, 14:00 - 18:00',
freitag: '07:00 - 12:00, 13:00 - 16:00',
/*render: (el, data) => {
el.innerHTML = `<kol-badge _color="#ff0000" _label="NIX"></kol-badge>`;
},*/
Expand Down
Binary file modified .../bmf/snapshots/theme-bmf/snapshot-for-scenarios-complex-form-firefox-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...zst/snapshots/theme-bzst/snapshot-for-scenarios-complex-form-firefox-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../snapshots/theme-itzbund/snapshot-for-scenarios-complex-form-firefox-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tzbund/snapshots/theme-itzbund/snapshot-for-table-badge-size-firefox-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...oll/snapshots/theme-mapz/snapshot-for-scenarios-complex-form-firefox-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...l/snapshots/theme-zollv3/snapshot-for-scenarios-complex-form-firefox-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e1c06fa

Please sign in to comment.