forked from cwharris/arrow-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
84 lines (76 loc) · 2.42 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import * as React from 'react';
import * as Arrow from 'apache-arrow';
import { valueToString } from 'apache-arrow/util/pretty';
import 'react-virtualized/styles.css';
import * as ReactVirtualized from 'react-virtualized';
import { MultiGrid, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
import { useWindowSize } from './hooks/useWindowSize';
import { useArrowTableFromFileInput } from './hooks/useArrowTable';
export function App() {
const [size] = useWindowSize();
const [table, cellMeasurerCache, fileInput] = useArrowTableFromFileInput();
return (
<>
<input {...fileInput}></input>
{!table ? undefined :
<ArrowTableGrid
table={table}
width={size.width-4}
height={size.height-24}
cellMeasurerCache={cellMeasurerCache}
/>
}
</>
);
}
interface ArrowTableGridProps {
width: number;
height: number;
rowHeight?: number;
headerHeight?: number;
table?: Arrow.Table | null;
cellMeasurerCache?: CellMeasurerCache | null;
}
function ArrowTableGrid({ table, width, height, cellMeasurerCache, rowHeight = 28, headerHeight = 25 }: ArrowTableGridProps): JSX.Element {
return (
<MultiGrid
fixedRowCount={1}
fixedColumnCount={1}
width={width}
height={height}
rowHeight={rowHeight}
headerHeight={headerHeight}
rowCount={(table && table.length || 0) + 1}
columnCount={(table && table.schema.fields.length || 0) + 1}
cellRenderer={cellRenderer.bind(0, table!, cellMeasurerCache!)}
columnWidth={cellMeasurerCache && cellMeasurerCache.columnWidth || 100}
/>
);
}
const cellRenderer = (
table: Arrow.Table, cellMeasurerCache: CellMeasurerCache,
{ key, style, rowIndex, columnIndex, parent }: ReactVirtualized.GridCellProps
) => {
let str;
style = { ...style, whiteSpace: 'nowrap' };
if (!table || (columnIndex === 0 && rowIndex === 0)) {
str = '';
} else if (columnIndex === 0) {
str = `${rowIndex - 1}`;
} else if (rowIndex === 0) {
str = `${table.schema.fields[columnIndex - 1]}`;
} else {
style.textAlign = 'right';
str = valueToString(table.get(rowIndex - 1).get(columnIndex - 1));
}
return (
<CellMeasurer
key={key}
parent={parent}
rowIndex={rowIndex}
cache={cellMeasurerCache}
columnIndex={columnIndex}>
<div key={key} style={style}><span style={{padding: 5}}>{str}</span></div>
</CellMeasurer>
);
};