What problem does it solve? Building the tabular section (таблична частина) of a document form often produces controls that show their own borders, rounded corners, and gaps inside table cells, rows taller than their controls, misaligned focus rings, and totals that silently lag behind edits. This Skill provides the TabularSection primitive and the shared .table-tabular / .cell-control CSS contract so tables render flush with the grid and totals stay correct. ## Core Features & Use Cases - TabularSection primitive: Declare typed columns (picker, decimal, text, computed, custom) and get add/copy/delete/move rows, automatic lineNo renumbering, keyboard navigation, live tfoot totals, and per-cell required/check validation. - CSS contract for cell controls: Apply the cell attribute to ui-decimal and ui-picker so controls fill cells edge to edge at 24px row height, with no border, radius, shadow, or focus outline inside the grid. - Multi-section documents on tabs: Place several sections on ui-form-tabs with automatic error-tab switching, and handle section-set changes as explicit SQL migrations. - Use Case: When building a supplier invoice form with goods and services sections, declare two TabularSection instances with decimal quantity/price columns and a computed amount column, render them on ui-form-tabs, and get live document totals plus canonical decimal values on save. ## Quick Start Ask the AI to create a document edit form with a tabular section using the TabularSection primitive, declaring picker and decimal columns with live totals and rendering the sections on ui-form-tabs.
