Kontur UI

The Table component provides a table framework that supports custom dimensions, width control, and sticky positioning (e.g., sticky headers or columns).

import { Table } from '@skbkontur/table';

// Usage example (conceptual based on documentation)
<Table>
  {/* Table content goes here */}
</Table>

The @skbkontur/table package provides a suite of components and hooks to implement column-based filtering, sorting from the header, and displaying active filter tokens.

Core Components

• Table.DropdownFilter: A basic dropdown filter.
• Table.DropdownSortableFilter: A dropdown filter that also supports sorting.
• Table.Filter, Table.FilterItem, Table.FilterSearch: Components used to construct complex dropdown filters.
• Table.FilterResultRow, Table.FilterResultCell, Table.Token: Components used to display active filters as removable tokens.

Core Hooks

• useTableFilters(data, columnConfig): Manages the state of filters, providing functions to set filters, retrieve unique values for options, get filtered rows, convert active filters to tokens, and reset filters.
• useTableSort(filteredRows): Manages the sorting state based on the currently filtered data.

Accessibility

The Radio component supports standard aria- attributes. You can use these attributes if you need to override the default accessibility behavior of the component.

Responsiveness

By default, the Radio component does not change its appearance or behavior on mobile devices.

Accessibility

The RadioGroup component supports standard aria- attributes if you need to override default behavior to meet specific accessibility requirements.

Responsiveness

By default, the RadioGroup component does not change its appearance or behavior on mobile devices.

The Autocomplete component differs from the Combobox in two ways:

1. It does not have an arrow icon.
2. The list of values cannot be opened manually; it is driven by the search input.

TooltipMenu is responsive. On mobile devices, the menu automatically opens as a mobile popup (MobilePopup).

This behavior is controlled by the React UI responsiveness settings. To configure the breakpoints for switching between desktop and mobile modes, refer to the Component Responsiveness documentation.

The TimePicker is designed with accessibility in mind, using textbox for the input and listbox for the dropdown menu.

Keyboard Shortcuts

• Navigation:
  • ArrowLeft / ArrowRight: Switch between time segments (e.g., from hours to minutes).
  • ArrowUp / ArrowDown: Change the value of the active segment or navigate items in the dropdown menu.
• Editing:
  • Backspace / Delete: Clear the active segment.
  • Ctrl + A: Select the entire field value.
• Selection & Closing:
  • Enter: Selects the active item in the dropdown or commits the typed value.
  • Escape: Closes the dropdown menu.

Best Practices

• Always associate the field with a label using <label htmlFor="ID"> and the component's id prop.
• If no visible label is used, provide an aria-label.

Form validation via ValidationContainer.validate() only considers components that are currently rendered using ValidationWrapper.

If a validationInfo object exists for a specific node but that node is not passed into any currently rendered ValidationWrapper component, it will not affect the overall result of ValidationContainer.validate().

Key takeaway: You do not need to duplicate UI visibility logic (e.g., if (isVisible)) inside your validation rules. You can always validate the node in the model; if the field is not present in the UI, the form will remain valid even if the underlying model node has validation errors.