mirror of https://github.com/grafana/grafana
ryan
7 years ago
parent
b582611004
commit
f59ccdf59c
@ -0,0 +1,9 @@ |
||||
# Table Panel - Native Plugin |
||||
|
||||
The Table Panel is **included** with Grafana. |
||||
|
||||
The table panel is very flexible, supporting both multiple modes for time series as well as for table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options. |
||||
|
||||
Check out the [Table Panel Showcase in the Grafana Playground](http://play.grafana.org/dashboard/db/table-panel-showcase) or read more about it here: |
||||
|
||||
[http://docs.grafana.org/reference/table_panel/](http://docs.grafana.org/reference/table_panel/) |
||||
@ -0,0 +1,67 @@ |
||||
// Libraries
|
||||
import _ from 'lodash'; |
||||
import React, { PureComponent } from 'react'; |
||||
|
||||
// Types
|
||||
import { PanelProps } from '@grafana/ui/src/types'; |
||||
import { Options } from './types'; |
||||
|
||||
import { Table, Index, Column } from 'react-virtualized'; |
||||
|
||||
interface Props extends PanelProps<Options> {} |
||||
|
||||
export class TablePanel extends PureComponent<Props> { |
||||
getRow = (index: Index): any => { |
||||
const { panelData } = this.props; |
||||
if (panelData.tableData) { |
||||
return panelData.tableData.rows[index.index]; |
||||
} |
||||
return null; |
||||
}; |
||||
|
||||
render() { |
||||
const { panelData, width, height, options } = this.props; |
||||
const { showHeader } = options; |
||||
|
||||
const headerClassName = null; |
||||
const headerHeight = 30; |
||||
const rowHeight = 20; |
||||
|
||||
let rowCount = 0; |
||||
if (panelData.tableData) { |
||||
rowCount = panelData.tableData.rows.length; |
||||
} else { |
||||
return <div>No Table Data...</div>; |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Table |
||||
disableHeader={!showHeader} |
||||
headerClassName={headerClassName} |
||||
headerHeight={headerHeight} |
||||
height={height} |
||||
overscanRowCount={5} |
||||
rowHeight={rowHeight} |
||||
rowGetter={this.getRow} |
||||
rowCount={rowCount} |
||||
width={width} |
||||
> |
||||
{panelData.tableData.columns.map((col, index) => { |
||||
return ( |
||||
<Column |
||||
label={col.text} |
||||
cellDataGetter={({ rowData }) => { |
||||
return rowData[index]; |
||||
}} |
||||
dataKey={index} |
||||
disableSort={true} |
||||
width={100} |
||||
/> |
||||
); |
||||
})} |
||||
</Table> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
//// Libraries
|
||||
import _ from 'lodash'; |
||||
import React, { PureComponent } from 'react'; |
||||
|
||||
// Types
|
||||
import { PanelEditorProps, Switch } from '@grafana/ui'; |
||||
import { Options } from './types'; |
||||
|
||||
export class TablePanelEditor extends PureComponent<PanelEditorProps<Options>> { |
||||
onToggleShowHeader = () => { |
||||
this.props.onOptionsChange({ ...this.props.options, showHeader: !this.props.options.showHeader }); |
||||
}; |
||||
|
||||
render() { |
||||
const { showHeader } = this.props.options; |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="section gf-form-group"> |
||||
<h5 className="section-heading">Header</h5> |
||||
<Switch label="Show" labelClass="width-5" checked={showHeader} onChange={this.onToggleShowHeader} /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,9 @@ |
||||
import { ReactPanelPlugin } from '@grafana/ui'; |
||||
|
||||
import { TablePanelEditor } from './TablePanelEditor'; |
||||
import { TablePanel } from './TablePanel'; |
||||
import { Options, defaults } from './types'; |
||||
|
||||
export const reactPanel = new ReactPanelPlugin<Options>(TablePanel); |
||||
reactPanel.setEditor(TablePanelEditor); |
||||
reactPanel.setDefaults(defaults); |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"type": "panel", |
||||
"name": "React Table", |
||||
"id": "table2", |
||||
"state": "alpha", |
||||
|
||||
"dataFormats": ["table"], |
||||
|
||||
"info": { |
||||
"author": { |
||||
"name": "Grafana Project", |
||||
"url": "https://grafana.com" |
||||
}, |
||||
"logos": { |
||||
"small": "img/icn-table-panel.svg", |
||||
"large": "img/icn-table-panel.svg" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
export interface Options { |
||||
showHeader: boolean; |
||||
} |
||||
|
||||
export const defaults: Options = { |
||||
showHeader: true, |
||||
}; |
||||
@ -0,0 +1,83 @@ |
||||
/** |
||||
COPIED FROM: |
||||
https://raw.githubusercontent.com/bvaughn/react-virtualized/master/source/styles.css |
||||
*/ |
||||
|
||||
/* Collection default theme */ |
||||
|
||||
.ReactVirtualized__Collection { |
||||
} |
||||
|
||||
.ReactVirtualized__Collection__innerScrollContainer { |
||||
} |
||||
|
||||
/* Grid default theme */ |
||||
|
||||
.ReactVirtualized__Grid { |
||||
} |
||||
|
||||
.ReactVirtualized__Grid__innerScrollContainer { |
||||
} |
||||
|
||||
/* Table default theme */ |
||||
|
||||
.ReactVirtualized__Table { |
||||
} |
||||
|
||||
.ReactVirtualized__Table__Grid { |
||||
} |
||||
|
||||
.ReactVirtualized__Table__headerRow { |
||||
font-weight: 700; |
||||
text-transform: uppercase; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.ReactVirtualized__Table__row { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
|
||||
.ReactVirtualized__Table__headerTruncatedText { |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.ReactVirtualized__Table__headerColumn, |
||||
.ReactVirtualized__Table__rowColumn { |
||||
margin-right: 10px; |
||||
min-width: 0px; |
||||
} |
||||
.ReactVirtualized__Table__rowColumn { |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.ReactVirtualized__Table__headerColumn:first-of-type, |
||||
.ReactVirtualized__Table__rowColumn:first-of-type { |
||||
margin-left: 10px; |
||||
} |
||||
.ReactVirtualized__Table__sortableHeaderColumn { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.ReactVirtualized__Table__sortableHeaderIconContainer { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.ReactVirtualized__Table__sortableHeaderIcon { |
||||
flex: 0 0 24px; |
||||
height: 1em; |
||||
width: 1em; |
||||
fill: currentColor; |
||||
} |
||||
|
||||
/* List default theme */ |
||||
|
||||
.ReactVirtualized__List { |
||||
} |
||||
Loading…
Reference in new issue