mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Table: Improve code readability (#94690)
feat(table): improve code radability
This commit is contained in:
parent
e48351fbd3
commit
bcf62612f3
@ -44,6 +44,7 @@ export const Table = memo((props: Props) => {
|
|||||||
data,
|
data,
|
||||||
height,
|
height,
|
||||||
onCellFilterAdded,
|
onCellFilterAdded,
|
||||||
|
onColumnResize,
|
||||||
width,
|
width,
|
||||||
columnMinWidth = COLUMN_MIN_WIDTH,
|
columnMinWidth = COLUMN_MIN_WIDTH,
|
||||||
noHeader,
|
noHeader,
|
||||||
@ -128,7 +129,7 @@ export const Table = memo((props: Props) => {
|
|||||||
|
|
||||||
// Internal react table state reducer
|
// Internal react table state reducer
|
||||||
const stateReducer = useTableStateReducer({
|
const stateReducer = useTableStateReducer({
|
||||||
...props,
|
onColumnResize,
|
||||||
onSortByChange: (state) => {
|
onSortByChange: (state) => {
|
||||||
// Collapse all rows. This prevents a known bug that causes the size of the rows to be incorrect due to
|
// Collapse all rows. This prevents a known bug that causes the size of the rows to be incorrect due to
|
||||||
// using `VariableSizeList` and `useExpanded` together.
|
// using `VariableSizeList` and `useExpanded` together.
|
||||||
@ -138,6 +139,7 @@ export const Table = memo((props: Props) => {
|
|||||||
props.onSortByChange(state);
|
props.onSortByChange(state);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
data,
|
||||||
});
|
});
|
||||||
|
|
||||||
const hasUniqueId = !!data.meta?.uniqueRowIdFields?.length;
|
const hasUniqueId = !!data.meta?.uniqueRowIdFields?.length;
|
||||||
|
@ -2,14 +2,14 @@ import { useCallback } from 'react';
|
|||||||
|
|
||||||
import { getFieldDisplayName } from '@grafana/data';
|
import { getFieldDisplayName } from '@grafana/data';
|
||||||
|
|
||||||
import { TableSortByFieldState, GrafanaTableColumn, GrafanaTableState, Props } from './types';
|
import { TableSortByFieldState, GrafanaTableColumn, GrafanaTableState, TableStateReducerProps, Props } from './types';
|
||||||
|
|
||||||
export interface ActionType {
|
export interface ActionType {
|
||||||
type: string;
|
type: string;
|
||||||
id: string | undefined;
|
id: string | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTableStateReducer({ onColumnResize, onSortByChange, data }: Props) {
|
export function useTableStateReducer({ onColumnResize, onSortByChange, data }: TableStateReducerProps) {
|
||||||
return useCallback(
|
return useCallback(
|
||||||
(newState: GrafanaTableState, action: ActionType) => {
|
(newState: GrafanaTableState, action: ActionType) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
|
@ -75,6 +75,12 @@ export interface GrafanaTableState extends TableState {
|
|||||||
|
|
||||||
export interface GrafanaTableRow extends Row, UseExpandedRowProps<{}> {}
|
export interface GrafanaTableRow extends Row, UseExpandedRowProps<{}> {}
|
||||||
|
|
||||||
|
export interface TableStateReducerProps {
|
||||||
|
onColumnResize?: TableColumnResizeActionCallback;
|
||||||
|
onSortByChange?: TableSortByActionCallback;
|
||||||
|
data: DataFrame;
|
||||||
|
}
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
ariaLabel?: string;
|
ariaLabel?: string;
|
||||||
data: DataFrame;
|
data: DataFrame;
|
||||||
|
Loading…
Reference in New Issue
Block a user