IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table: Make the height of the table include header cells (#21824)

Browse Source 
* Mak table panel with padding

* Make table have a correct height
This commit is contained in:
Dominik Prokop 2020-01-30 07:47:21 +01:00 committed by GitHub
parent 13948c0b76
commit 9882464505
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/Table/Table.tsx
View File

@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
import { DataFrame } from '@grafana/data';
import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table';
import { FixedSizeList } from 'react-window';
import useMeasure from 'react-use/lib/useMeasure';
import { getColumns, getTableRows } from './utils';
import { useTheme } from '../../themes';
import { TableFilterActionCallback } from './types';
@ -17,6 +18,7 @@ export interface Props {
export const Table = ({ data, height, onCellClick, width }: Props) => {
const theme = useTheme();
const [ref, headerRowMeasurements] = useMeasure();
const tableStyles = getTableStyles(theme);
const { getTableProps, headerGroups, rows, prepareRow } = useTable(
@ -53,12 +55,17 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
<div {...getTableProps()} className={tableStyles.table}>
<div>
{headerGroups.map((headerGroup: any) => (
<div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()}>
<div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
{headerGroup.headers.map((column: any) => renderHeaderCell(column, tableStyles.headerCell))}
</div>
))}
</div>
<FixedSizeList height={height} itemCount={rows.length} itemSize={tableStyles.rowHeight} width={width}>
<FixedSizeList
height={height - headerRowMeasurements.height}
itemCount={rows.length}
itemSize={tableStyles.rowHeight}
width={width}
>
{RenderRow}
</FixedSizeList>
</div>

5
public/app/plugins/panel/table2/module.tsx
View File

@ -4,7 +4,4 @@ import { TablePanelEditor } from './TablePanelEditor';
import { TablePanel } from './TablePanel';
import { Options, defaults } from './types';
export const plugin = new PanelPlugin<Options>(TablePanel)
.setNoPadding()
.setDefaults(defaults)
.setEditor(TablePanelEditor);
export const plugin = new PanelPlugin<Options>(TablePanel).setDefaults(defaults).setEditor(TablePanelEditor);