1 | import React from 'react';
|
2 | import { render } from 'react-dom';
|
3 | import { HugeTable } from '../src';
|
4 |
|
5 | import schema from './schema';
|
6 | import data from './data';
|
7 |
|
8 | import '../src/HugeTable.less';
|
9 | import '../node_modules/bootstrap/less/bootstrap.less';
|
10 |
|
11 | function proxyImages (imageUrl) {
|
12 |
|
13 |
|
14 | if(!imageUrl || imageUrl.startsWith('https://')) {
|
15 | return imageUrl;
|
16 | }
|
17 |
|
18 | return `https://images.weserv.nl/?url=${imageUrl.replace('http://', '')}`;
|
19 | }
|
20 |
|
21 | const mountNode = document.getElementById('main');
|
22 |
|
23 | const onSchemaChangeCallback = () => {
|
24 | console.debug('Schema changed!', schema);
|
25 | };
|
26 |
|
27 | const options = {
|
28 | height: 400,
|
29 | width: 600,
|
30 | mixedContentImage: proxyImages,
|
31 | id: '1',
|
32 | };
|
33 |
|
34 | render(<HugeTable data={data.results} hideRowNumbers schema={schema} options={options} resizeByContent onSchemaChange={onSchemaChangeCallback} />, mountNode);
|
35 |
|
36 | // Rendereres example.
|
37 |
|
38 | const mountNode2 = document.getElementById('main2');
|
39 | const options2 = {
|
40 | height: 800,
|
41 | width: 1200,
|
42 | mixedContentImage: proxyImages,
|
43 | id: '2',
|
44 | hideHeader: true,
|
45 | };
|
46 | const renderers = {
|
47 | HEADER(properties) {
|
48 | // properties object might include following properties:
|
49 | // `cellData` - REQUIRED - Object containing possible values of data that the cell can render.
|
50 | // It should have at least the 'main' key but other values like `_text`,
|
51 | // '_url' '_src' are possible. Those are dependant on the cell type.
|
52 | // `width` - REQUIRED - The width that the cell will have. It is an informational value, can't be changed.
|
53 | // The table is managing cell width and height because of column resizing ability.
|
54 | // `height` - REQUIRED - Same as above, just for cell height.
|
55 | // `columnKey` - REQUIRED - Name of th column key. Informational info.
|
56 | // `key` - OPTIONAL - If a cell is rendered as part of array of values, it will have a custom key
|
57 | // that should be rendered on the cell, to satisfy React's rendering of lists of data.
|
58 | // `columnDataType` - OPTIONAL - Defines the type of column. The same as the the key in the `renderers` object.
|
59 | // `mixedContentImage` - OPTIONAL - The same function that was passed to the `huge-table` props options.
|
60 | //
|
61 | return <div>H: {properties.cellData.main}</div>;
|
62 | },
|
63 | };
|
64 |
|
65 | render(
|
66 | <HugeTable data={data.results}
|
67 | disableClickEvents
|
68 | buttonColumnWidth={40}
|
69 | rowHeight={30}
|
70 | headerHeight={30}
|
71 | showScrollingArrows
|
72 | schema={schema}
|
73 | options={options2}
|
74 | renderers={renderers}
|
75 | onSchemaChange={onSchemaChangeCallback}
|
76 | resizeByContent
|
77 | activeColumnIndex={6}
|
78 | />, mountNode2);
|