Skip to main content

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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 import { 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​