mirror of https://github.com/grafana/grafana
Table: Add enable pagination option (#45732)
* Table: Add page size option / pagination * Update docs/sources/visualizations/table/_index.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * FIx packages build * Move pagination below footer * Move styles to tableStyles * Fix typecheck in jaeger-ui * Set footer to hide onChange * Styling tweaks * Center paging * Tweaks * Change pageSize to enablePagination * Move header and footer options to a separate category * Fix performance and styling issue for the pagination * Some more styling and tweaking * Fix tests * Update docs/sources/visualizations/table/_index.md Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com> * Update docs/sources/visualizations/table/_index.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>pull/47110/head
Zoltán Bedi
4 years ago
committed by
GitHub
parent
502cf8b37f
commit
15b48fc188
@ -0,0 +1,14 @@ |
||||
import React from 'react'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import { Pagination } from './Pagination'; |
||||
|
||||
describe('Pagination component', () => { |
||||
it('should render only 10 buttons when number of pages is higher than 8', () => { |
||||
render(<Pagination currentPage={1} numberOfPages={90} onNavigate={() => {}} />); |
||||
expect(screen.getAllByRole('button')).toHaveLength(10); |
||||
}); |
||||
it('should only show 3 buttons when showSmallVersion is true', () => { |
||||
render(<Pagination currentPage={1} numberOfPages={90} onNavigate={() => {}} showSmallVersion />); |
||||
expect(screen.getAllByRole('button')).toHaveLength(4); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,111 @@ |
||||
import type { |
||||
UseColumnOrderInstanceProps, |
||||
UseColumnOrderState, |
||||
UseExpandedHooks, |
||||
UseExpandedInstanceProps, |
||||
UseExpandedOptions, |
||||
UseExpandedRowProps, |
||||
UseExpandedState, |
||||
UseFiltersColumnOptions, |
||||
UseFiltersColumnProps, |
||||
UseFiltersInstanceProps, |
||||
UseFiltersOptions, |
||||
UseFiltersState, |
||||
UseGlobalFiltersColumnOptions, |
||||
UseGlobalFiltersInstanceProps, |
||||
UseGlobalFiltersOptions, |
||||
UseGlobalFiltersState, |
||||
UseGroupByCellProps, |
||||
UseGroupByColumnOptions, |
||||
UseGroupByColumnProps, |
||||
UseGroupByHooks, |
||||
UseGroupByInstanceProps, |
||||
UseGroupByOptions, |
||||
UseGroupByRowProps, |
||||
UseGroupByState, |
||||
UsePaginationInstanceProps, |
||||
UsePaginationOptions, |
||||
UsePaginationState, |
||||
UseResizeColumnsColumnOptions, |
||||
UseResizeColumnsColumnProps, |
||||
UseResizeColumnsOptions, |
||||
UseResizeColumnsState, |
||||
UseRowSelectHooks, |
||||
UseRowSelectInstanceProps, |
||||
UseRowSelectOptions, |
||||
UseRowSelectRowProps, |
||||
UseRowSelectState, |
||||
UseRowStateCellProps, |
||||
UseRowStateInstanceProps, |
||||
UseRowStateOptions, |
||||
UseRowStateRowProps, |
||||
UseRowStateState, |
||||
UseSortByColumnOptions, |
||||
UseSortByColumnProps, |
||||
UseSortByHooks, |
||||
UseSortByInstanceProps, |
||||
UseSortByOptions, |
||||
UseSortByState, |
||||
} from 'react-table'; |
||||
|
||||
declare module 'react-table' { |
||||
export interface TableOptions<D extends Record<string, unknown>> |
||||
extends UseExpandedOptions<D>, |
||||
UseFiltersOptions<D>, |
||||
UseGlobalFiltersOptions<D>, |
||||
UseGroupByOptions<D>, |
||||
UsePaginationOptions<D>, |
||||
UseResizeColumnsOptions<D>, |
||||
UseRowSelectOptions<D>, |
||||
UseRowStateOptions<D>, |
||||
UseSortByOptions<D>, |
||||
// note that having Record here allows you to add anything to the options, this matches the spirit of the
|
||||
// underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
|
||||
// feature set, this is a safe default.
|
||||
Record<string, any> {} |
||||
|
||||
export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>> |
||||
extends UseExpandedHooks<D>, |
||||
UseGroupByHooks<D>, |
||||
UseRowSelectHooks<D>, |
||||
UseSortByHooks<D> {} |
||||
|
||||
export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>> |
||||
extends UseColumnOrderInstanceProps<D>, |
||||
UseExpandedInstanceProps<D>, |
||||
UseFiltersInstanceProps<D>, |
||||
UseGlobalFiltersInstanceProps<D>, |
||||
UseGroupByInstanceProps<D>, |
||||
UsePaginationInstanceProps<D>, |
||||
UseRowSelectInstanceProps<D>, |
||||
UseRowStateInstanceProps<D>, |
||||
UseSortByInstanceProps<D> {} |
||||
|
||||
export interface TableState<D extends Record<string, unknown> = Record<string, unknown>> |
||||
extends UseColumnOrderState<D>, |
||||
UseExpandedState<D>, |
||||
UseFiltersState<D>, |
||||
UseGlobalFiltersState<D>, |
||||
UseGroupByState<D>, |
||||
UsePaginationState<D>, |
||||
UseResizeColumnsState<D>, |
||||
UseRowSelectState<D>, |
||||
UseRowStateState<D>, |
||||
UseSortByState<D> {} |
||||
|
||||
export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>> |
||||
extends UseGlobalFiltersColumnOptions<D>, |
||||
UseGroupByColumnOptions<D>, |
||||
UseResizeColumnsColumnOptions<D>, |
||||
UseSortByColumnOptions<D> {} |
||||
|
||||
export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>> |
||||
extends UseFiltersColumnProps<D>, |
||||
UseGroupByColumnProps<D>, |
||||
UseResizeColumnsColumnProps<D>, |
||||
UseSortByColumnProps<D> {} |
||||
|
||||
export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any> |
||||
extends UseGroupByCellProps<D>, |
||||
UseRowStateCellProps<D> {} |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
import { StandardEditorProps } from '@grafana/data'; |
||||
import { Switch } from '@grafana/ui'; |
||||
import React from 'react'; |
||||
|
||||
export function PaginationEditor({ onChange, value, context }: StandardEditorProps<boolean>) { |
||||
const changeValue = (event: React.FormEvent<HTMLInputElement> | undefined) => { |
||||
if (event?.currentTarget.checked) { |
||||
context.options.footer.show = false; |
||||
} |
||||
onChange(event?.currentTarget.checked); |
||||
}; |
||||
|
||||
return <Switch value={Boolean(value)} onChange={changeValue} />; |
||||
} |
||||
Loading…
Reference in new issue