Event

Overview

Appuyez sur @ pour sélectionner une colonne

Current Cell:

Last keydown:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 import React, { useState } from 'react'; import VirtualTable from '../../../../../src/components/VirtualTable'; import { data } from './mock'; const columns = [{ key: 'id', header: '#' }, { key: 'first_name', header: 'Firstname', size: 1 }, { key: 'last_name', header: 'Lastname', size: 1 }, { key: 'full_name', header: 'Fullname', size: 1 } ]; const EventOverview = () => { const [currentCell, setCurrentCell] = useState(); const [keyDown, setKeyDown] = useState(); function handleFocusChange({ to }) { if (!to) { setCurrentCell('--'); } else { setCurrentCell(`Line: ${to[0]}, Column: ${to[1]} (${columns[to[1]].key})`); } } function handleKeyDown(e, rowIndex, columnIndex) { setKeyDown({ ...e, rowIndex, columnIndex }); } return ( <> <VirtualTable config={{ alwaysInEdition: true, columns }} data={data} onFocusChange={handleFocusChange} onKeyDown={handleKeyDown} tableKeyName="doc-event" onRowContextMenu={(e, data) => console.log(data)} onRowClick={(e, data) => console.log(data)} /> <div>Current Cell: {currentCell}</div> <div>Last keydown: { keyDown && (<> <b>{keyDown.rowIndex} : {keyDown.columnIndex}</b> - <span>Key: {keyDown.key} - Alt: {keyDown.altKey ? 'true' : 'false'} - Ctrl: {keyDown.ctrlKey ? 'true' : 'false'} - Shift: {keyDown.shiftKey ? 'true' : 'false'}</span> </>)} </div> </> ); }; export default EventOverview;

Handling global events

onFocusChange

onClick

onDoubleClick

onKeyDown

onRowClick

Callback fired when a click event comes from a row container element.

function(event: Event, params: { keyId: string|number, columnKey: string, row: Row }) => void

onRowContextMenu

Callback fired when a right click event comes from a row container element.

function(event: Event, params: { keyId: string|number, columnKey: string, row: Row }) => void

onColumnsChange

Callback fired when the columns settings are changed. Meaning columns being hidden/shown.

function(Column[])

onFilterChange

Callback fired when a filter is changed

function({ q: string, filters: Map })

onChipFocus

Callback fired when a filter chip is focused

function(e: FocusEvent<HTMLInputElement>)

onChipBlur

Callback fired when a filter chip is blurred

function(e: FocusEvent<HTMLInputElement>)

onSearchBarEnterKeyDown

Callback fired when we keyDown the ENTER key on the main search input

function onSearchBarEnterKeyDown(searchValue: String)

onCustomExportClick

Callback fired when the export button is clicked. This callback is called with the export type requested (e.g., csv, pdf, xls, or print), and an additional boolean value that indicates whether all pages should be exported.

If the isExportAllPages prop is set to true, the callback will receive an additional boolean parameter, which will be true if the user opted to export all pages, and false otherwise.

function onCustomExportClick(data: csv | pdf | xls | print, exportAllPages?: boolean)

Handling cell events

All cells type are listening to those events. Keep in mind that those listeners are located on the cell level and not the cell subcomponent level. Meaning that if the user click just next to the comment Icon but still into the cell, the onClick event will be triggered.

onClick

onDoubleClick

onKeyDown

onChange

onFocus

onBlur