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: Fixed header alignment (#22236)

Browse Source
This commit is contained in:
Torkel Ödegaard 2020-02-18 14:16:42 +01:00 committed by GitHub
parent ff9556229a
commit 6ad8375293
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { DataFrame } from '@grafana/data'; import { DataFrame, Field } from '@grafana/data';
import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table'; import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table';
import { FixedSizeList } from 'react-window'; import { FixedSizeList } from 'react-window';
import useMeasure from 'react-use/lib/useMeasure'; import useMeasure from 'react-use/lib/useMeasure';
@ -8,6 +8,8 @@ import { useTheme } from '../../themes';
import { TableFilterActionCallback } from './types'; import { TableFilterActionCallback } from './types';
import { getTableStyles } from './styles'; import { getTableStyles } from './styles';
import { TableCell } from './TableCell'; import { TableCell } from './TableCell';
import { Icon } from '../Icon/Icon';
import { getTextAlign } from './utils';
export interface Props { export interface Props {
data: DataFrame; data: DataFrame;
@ -56,7 +58,9 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
<div> <div>
{headerGroups.map((headerGroup: any) => ( {headerGroups.map((headerGroup: any) => (
<div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}> <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
{headerGroup.headers.map((column: any) => renderHeaderCell(column, tableStyles.headerCell))} {headerGroup.headers.map((column: any) =>
renderHeaderCell(column, tableStyles.headerCell, data.fields[column.index])
)}
</div> </div>
))} ))}
</div> </div>
@ -72,17 +76,18 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
); );
}; };
function renderHeaderCell(column: any, className: string) { function renderHeaderCell(column: any, className: string, field: Field) {
const headerProps = column.getHeaderProps(column.getSortByToggleProps()); const headerProps = column.getHeaderProps(column.getSortByToggleProps());
const fieldTextAlign = getTextAlign(field);
if (column.textAlign) { if (fieldTextAlign) {
headerProps.style.textAlign = column.textAlign; headerProps.style.textAlign = fieldTextAlign;
} }
return ( return (
<div className={className} {...headerProps}> <div className={className} {...headerProps}>
{column.render('Header')} {column.render('Header')}
<span>{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}</span> {column.isSorted && (column.isSortedDesc ? <Icon name="caret-down" /> : <Icon name="caret-up" />)}
</div> </div>
); );
} }

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

@ -17,6 +17,7 @@ export const TableCell: FC<Props> = ({ cell, field, tableStyles, onCellClick })
const cellProps = cell.getCellProps(); const cellProps = cell.getCellProps();
let onClick: ((event: React.SyntheticEvent) => void) | undefined = undefined; let onClick: ((event: React.SyntheticEvent) => void) | undefined = undefined;
if (filterable && onCellClick) { if (filterable && onCellClick) {
if (cellProps.style) { if (cellProps.style) {
cellProps.style.cursor = 'pointer'; cellProps.style.cursor = 'pointer';
@ -24,6 +25,7 @@ export const TableCell: FC<Props> = ({ cell, field, tableStyles, onCellClick })
onClick = () => onCellClick(cell.column.Header as string, cell.value); onClick = () => onCellClick(cell.column.Header as string, cell.value);
} }
const fieldTextAlign = getTextAlign(field); const fieldTextAlign = getTextAlign(field);
if (fieldTextAlign && cellProps.style) { if (fieldTextAlign && cellProps.style) {
cellProps.style.textAlign = fieldTextAlign; cellProps.style.textAlign = fieldTextAlign;