IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -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 { DataFrame } from '@grafana/data';
import { DataFrame, Field } from '@grafana/data';
import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table';
import { FixedSizeList } from 'react-window';
import useMeasure from 'react-use/lib/useMeasure';
@ -8,6 +8,8 @@ import { useTheme } from '../../themes';
import { TableFilterActionCallback } from './types';
import { getTableStyles } from './styles';
import { TableCell } from './TableCell';
import { Icon } from '../Icon/Icon';
import { getTextAlign } from './utils';
export interface Props {
data: DataFrame;
@ -56,7 +58,9 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
<div>
{headerGroups.map((headerGroup: any) => (
<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>
@ -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 fieldTextAlign = getTextAlign(field);
if (column.textAlign) {
headerProps.style.textAlign = column.textAlign;
if (fieldTextAlign) {
headerProps.style.textAlign = fieldTextAlign;
}
return (
<div className={className} {...headerProps}>
{column.render('Header')}
<span>{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}</span>
{column.isSorted && (column.isSortedDesc ? <Icon name="caret-down" /> : <Icon name="caret-up" />)}
</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();
let onClick: ((event: React.SyntheticEvent) => void) | undefined = undefined;
if (filterable && onCellClick) {
if (cellProps.style) {
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);
}
const fieldTextAlign = getTextAlign(field);
if (fieldTextAlign && cellProps.style) {
cellProps.style.textAlign = fieldTextAlign;