This commit is contained in:
ryan 2019-03-06 16:25:28 -08:00
parent 6a8a60bcdf
commit 23c3e9d80a

View File

@ -13,7 +13,7 @@ import { SortedTableData } from './sortable';
interface Props extends PanelProps<Options> {} interface Props extends PanelProps<Options> {}
interface State { interface State {
sortBy?: number; // but really is a number! sortBy?: number;
sortDirection?: SortDirectionType; sortDirection?: SortDirectionType;
data: SortedTableData; data: SortedTableData;
} }
@ -37,11 +37,8 @@ export class TablePanel extends Component<Props, State> {
const { panelData, options } = this.props; const { panelData, options } = this.props;
const { sortBy, sortDirection } = this.state; const { sortBy, sortDirection } = this.state;
console.log('componentDidUpdate', this.props);
// Update the renderer if options change // Update the renderer if options change
if (options !== prevProps.options) { if (options !== prevProps.options) {
console.log('Options Changed, update renderer', options);
this.renderer = new TableRenderer(options.styles, this.state.data, this._rowGetter, this.props.replaceVariables); this.renderer = new TableRenderer(options.styles, this.state.data, this._rowGetter, this.props.replaceVariables);
} }
@ -49,7 +46,6 @@ export class TablePanel extends Component<Props, State> {
if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) { if (panelData !== prevProps.panelData || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) {
const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC'); const data = new SortedTableData(panelData.tableData, sortBy, sortDirection === 'DESC');
this.setState({ data }); this.setState({ data });
console.log('Data Changed, update', data);
} }
} }
@ -74,21 +70,13 @@ export class TablePanel extends Component<Props, State> {
}; };
_headerRenderer = (header: TableHeaderProps): ReactNode => { _headerRenderer = (header: TableHeaderProps): ReactNode => {
const dataKey = header.dataKey as any; // types say string, but it is number? const dataKey = header.dataKey as any; // types say string, but it is number!
const { data, sortBy, sortDirection } = this.state; const { data, sortBy, sortDirection } = this.state;
const col = data.getInfo()[dataKey]; const col = data.getInfo()[dataKey];
if (!col) {
return <div>??{dataKey}??</div>;
}
const isSorted = sortBy === dataKey;
console.log('header SORT', sortBy, isSorted);
return ( return (
<div> <div>
{col.text} {isSorted && <SortIndicator sortDirection={sortDirection} />} {col.text} {sortBy === dataKey && <SortIndicator sortDirection={sortDirection} />}
</div> </div>
); );
}; };
@ -101,12 +89,12 @@ export class TablePanel extends Component<Props, State> {
}; };
render() { render() {
const { panelData, width, height, options } = this.props; const { width, height, options } = this.props;
const { showHeader } = options; const { showHeader } = options;
// const { sortBy, sortDirection } = this.state; // const { sortBy, sortDirection } = this.state;
const { tableData } = panelData; const { data } = this.state;
if (!tableData || tableData.rows.length < 1) { if (!data) {
return <div>No Table Data...</div>; return <div>No Table Data...</div>;
} }
@ -122,18 +110,21 @@ export class TablePanel extends Component<Props, State> {
overscanRowCount={10} overscanRowCount={10}
rowHeight={30} rowHeight={30}
rowGetter={this._rowGetter} rowGetter={this._rowGetter}
rowCount={tableData.rows.length} rowCount={data.getCount()}
sort={this._sort} sort={this._sort}
width={width} width={width}
> >
{tableData.columns.map((col, index) => { {data.getInfo().map((col, index) => {
return ( return (
<Column <Column
key={index} key={index}
dataKey={index} dataKey={index}
headerRenderer={this._headerRenderer} headerRenderer={this._headerRenderer}
cellRenderer={this._cellRenderer} cellRenderer={this._cellRenderer}
width={300} width={150}
minWidth={50}
maxWidth={400}
flexGrow={1}
/> />
); );
})} })}