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

TablePanel: Make column headers keyboard-friendly (#44267)

Browse Source
This commit is contained in:
kay delaney 2022-01-20 14:31:27 +00:00 committed by GitHub
parent ebbb283d75
commit cc6839a21d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,11 +55,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field,
<div className={tableStyles.headerCell} {...headerProps} role="columnheader">
{column.canSort && (
<>
<div
{...column.getSortByToggleProps()}
className={tableStyles.headerCellLabel}
title={column.render('Header')}
>
<button {...column.getSortByToggleProps()} className={tableStyles.headerCellLabel}>
{showTypeIcons && (
<Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" className={tableStyles.typeIcon} />
)}
@ -67,7 +63,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field,
<div>
{column.isSorted && (column.isSortedDesc ? <Icon name="arrow-down" /> : <Icon name="arrow-up" />)}
</div>
</div>
</button>
{column.canFilter && <Filter column={column} tableStyles={tableStyles} field={field} />}
</>
)}

3
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -92,6 +92,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
}
`,
headerCellLabel: css`
border: none;
padding: 0;
background: inherit;
cursor: pointer;
white-space: nowrap;
overflow: hidden;