mirror of
https://github.com/lukasmartinelli/postgis-editor.git
synced 2025-12-08 20:15:55 +00:00
Use FlexTable
This commit is contained in:
lukasmartinelli
parent
ee2f7d9cc1
commit
8daf7e99a1
@ -12,6 +12,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="resources/codemirror/dracula.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="resources/css/main.css" />
|
||||
<link rel="stylesheet" type="text/css" href="resources/css/react-virtualized.css" />
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
|
||||
</head>
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
"dependencies": {
|
||||
"configstore": "^2.0.0",
|
||||
"dbgeo": "^0.1.0",
|
||||
"fixed-data-table": "^0.6.0",
|
||||
"install": "^0.6.1",
|
||||
"jquery": "^2.1.4",
|
||||
"lodash": "^4.9.0",
|
||||
@ -36,11 +37,13 @@
|
||||
"pg-promise": "^3.7.0",
|
||||
"randomcolor": "^0.4.4",
|
||||
"react": "^15.0.1",
|
||||
"react-addons-shallow-compare": "^15.0.1",
|
||||
"react-codemirror": "^0.2.6",
|
||||
"react-data-grid": "^0.14.22",
|
||||
"react-dom": "^15.0.1",
|
||||
"react-json-table": "0.0.3",
|
||||
"react-modal": "^1.0.0",
|
||||
"react-virtualized": "^6.1.2",
|
||||
"sql-parser": "^0.5.0",
|
||||
"turf": "^2.0.2"
|
||||
}
|
||||
|
||||
111
resources/css/react-virtualized.css
Normal file
111
resources/css/react-virtualized.css
Normal file
@ -0,0 +1,111 @@
|
||||
/* Grid default theme */
|
||||
|
||||
.Grid {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* Without this property, Chrome repaints the entire Grid any time a new row or column is added.
|
||||
Firefox only repaints the new row or column (regardless of this property).
|
||||
Safari and IE don't support the property at all. */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.Grid__innerScrollContainer {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Grid__cell {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* FlexTable default theme */
|
||||
|
||||
.FlexTable {
|
||||
}
|
||||
|
||||
.FlexTable__Grid {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.FlexTable__headerRow {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.FlexTable__headerTruncatedText {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.FlexTable__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.FlexTable__headerColumn,
|
||||
.FlexTable__rowColumn {
|
||||
margin-right: 10px;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.FlexTable__headerColumn:first-of-type,
|
||||
.FlexTable__rowColumn:first-of-type {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.FlexTable__headerColumn {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
.FlexTable__sortableHeaderColumn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.FlexTable__rowColumn {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.FlexTable__sortableHeaderIconContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.FlexTable__sortableHeaderIcon {
|
||||
flex: 0 0 24px;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.FlexTable__truncatedColumnText {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* VirtualScroll default theme */
|
||||
|
||||
.VirtualScroll {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.VirtualScroll__innerScrollContainer {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.VirtualScroll__row {
|
||||
position: absolute;
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
.workspace-table {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.workspace-logs {
|
||||
|
||||
70
src/table.js
70
src/table.js
@ -2,27 +2,15 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import DataGrid from 'react-data-grid';
|
||||
import {isGeometry} from './database.js';
|
||||
import JsonTable from 'react-json-table';
|
||||
import { AutoSizer, FlexTable, FlexColumn } from 'react-virtualized';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
// Even though huge tables are fun it does not make any sense
|
||||
// to query a million rows and scroll through all of them
|
||||
// therefore we make our life easy by limiting the displayed rows
|
||||
const maxRows = 1000;
|
||||
|
||||
// Because we use a split window with the table on the left
|
||||
// we don't have space for unlimited columns better
|
||||
// limit the number since the user can click on a row
|
||||
// to get the full detail on the map interface itself
|
||||
const maxColumns = 6;
|
||||
|
||||
export class GeoJSONTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.populateTable = this.populateTable.bind(this);
|
||||
this.showRowDetail = this.showRowDetail.bind(this);
|
||||
this.state = {
|
||||
columns: [],
|
||||
fields: [],
|
||||
features: []
|
||||
};
|
||||
}
|
||||
@ -37,31 +25,43 @@ export class GeoJSONTable extends React.Component {
|
||||
|
||||
populateTable(result) {
|
||||
this.setState({
|
||||
features: result.geojson.features.slice(0, maxRows).map(f => {
|
||||
return _.extend({ _feature: f }, f.properties);
|
||||
}),
|
||||
columns: result.fields
|
||||
.filter(f => !isGeometry(f.name))
|
||||
.slice(0, maxColumns)
|
||||
.map(field => {
|
||||
return {
|
||||
key: field.name,
|
||||
label: field.name
|
||||
};
|
||||
})
|
||||
features: result.geojson.features,
|
||||
fields: result.fields.filter(f => !isGeometry(f.name))
|
||||
});
|
||||
}
|
||||
|
||||
showRowDetail(e, row) {
|
||||
window.events.publish('data.detail', row._feature);
|
||||
}
|
||||
|
||||
render() {
|
||||
const table = <JsonTable
|
||||
rows={this.state.features}
|
||||
columns={this.state.columns}
|
||||
onClickRow={this.showRowDetail} />;
|
||||
const features = this.state.features;
|
||||
const showRowDetail = i => window.events.publish('data.detail', features[i]);
|
||||
const columns = this.state.fields.map(field =>
|
||||
<FlexColumn
|
||||
key={field.name}
|
||||
label={field.name}
|
||||
dataKey={field.name}
|
||||
flexGrow={1}
|
||||
minWidth={150}
|
||||
cellDataGetter={(dataKey, rowData) => rowData.properties[dataKey]}
|
||||
/>
|
||||
);
|
||||
|
||||
return this.state.features.length > 0 ? table : null;
|
||||
const table = (
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<FlexTable
|
||||
width={width}
|
||||
height={height}
|
||||
headerHeight={20}
|
||||
rowHeight={30}
|
||||
rowsCount={features.length}
|
||||
rowGetter={index => features[index]}
|
||||
onRowClick={showRowDetail}
|
||||
>
|
||||
{columns}
|
||||
</FlexTable>
|
||||
)}
|
||||
</AutoSizer>
|
||||
);
|
||||
|
||||
return features.length > 0 ? table : null;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user