Meta tags:
description=Switching between layers is a change of import and element name. Each layer s setup is in Angular Material and Tailwind CSS.;

Headings (most frequently used words):

components, reference, guide, ui, layers, maintainers, the, four, resourcetable, resourceform, choosing, layer,

Text of the page (most frequently used words):
the (35), #resource (30), table (25), and (17), source (17), line (13), material (12), libs (11), src (11), lib (11), tailwind (10), form (10), column (10), pidrang (9), field (9), fields (9), with (7), page (7), lines (7), mode (7), same (7), file (7), actions (7), core (6), one (6), input (6), data (6), not (5), edit (5), only (5), value (5), yes (5), does (5), components (5), what (4), for (4), layers (4), per (4), dirty (4), design (4), notes (4), resourceform (4), create (4), are (4), when (4), save (4), its (4), html (4), css (4), reference (4), angular (3), cli (3), docs (3), payload (3), invalid (3), submit (3), always (3), empty (3), type (3), emits (3), changed (3), own (3), container (3), element (3), names (3), projected (3), resourcetable (3), refine (2), this (2), each (2), layer (2), name (2), while (2), validation (2), those (2), true (2), rendered (2), sent (2), readonly (2), nothing (2), number (2), false (2), boolean (2), buildresourcepayload (2), default (2), behaviour (2), user (2), through (2), output (2), values (2), never (2), caller (2), render (2), required (2), inputs (2), cell (2), stay (2), full (2), top (2), screen (2), scrolls (2), row (2), keeps (2), columns (2), named (2), implicit (2), write (2), pages (2), yourself (2), demo (2), artifacts (2), releasing (2), maintainers (2), getting (2), started (2), navigation (2), mit, licensed, inspired, affiliated, next, previous, pager, github, compares, says, generator, writes, choosing, remounted, record, via, keyed, signal, forms, carry, stale, state, across, navigations, 107, key, track, depends, shouldblocksubmit, blocked, blocking, starts, immediately, after, touched, pattern, means, isrequiredwhenempty, presentation, format, patterns, types, blocks, unless, nullable, numeric, time, timestamp, date, editablefields, neither, nor, 142, 144, isshownvaluesentoncreate, without, sends, shown, unchecked, checkbox, hasdefault, unchanged, dropped, from, server, applies, instead, client, placeholder, null, submits, actually, filtered, partial, disables, ignores, further, submissions, pending, draft, bound, linkedsignal, mutating, editable, non, determines, rules, outputs, long, cut, 12rem, ellipsis, show, renders, whole, cells, align, truncated, wrap, buttons, title, sits, scroll, narrow, sideways, stays, place, reachable, scrolling, keyboard, can, focus, even, has, focusable, wide, width, parent, aria, label, tabindex, role, region, overflow, auto, div, mat, use, positional, rather, than, identification, avoiding, duplicate, error, that, would, occur, were, colliding, last, header, context, variable, gives, access, current, object, alongside, internal, identifiers, collision, possible, templateref, rows, display, entry, order, read, filters, out, list, equivalent, hidden, class, package, four, switching, between, change, import, setup, overview, providers, architecture, authentication, guide, sidebar, return, menu, demos, main, search, skip, content,

Text of the page (random words):
components reference pidrang skip to content pidrang docs search k main navigation getting started reference core components ui layers cli maintainers design notes releasing demo artifacts demos menu return to top sidebar navigation guide getting started write the pages yourself authentication architecture data providers ui layers overview angular material tailwind css reference core components cli maintainers design notes releasing demo artifacts on this page components reference switching between layers is a change of import and element name each layer s setup is in angular material and tailwind css the four components package class element pidrang material resourcetable t pidrang material resource table resourceform t pidrang material resource form pidrang tailwind resourcetable t pidrang tailwind resource table resourceform t pidrang tailwind resource form resourcetable inputs input type required what it does fields field yes columns to display one data column per entry in order the table does not read hidden the caller filters those fields out as the list page of write the pages yourself does source libs material src lib resource table resource table ts line 19 material tailwind equivalent at libs tailwind src lib resource table resource table ts data t yes rows to render source same file line 20 projected actions a templateref implicit t rendered as the last column with an actions header the implicit context variable gives access to the current row object a data column named actions keeps its own column alongside the projected one column names are internal identifiers field 0 field 1 so no collision is possible source libs material src lib resource table resource table ts line 21 docs design notes md line 89 mat table columns use positional names field n rather than field names for identification avoiding the duplicate column error that would occur if a data column were named actions colliding with the projected actions column the table sits in a scroll container of its own a div with overflow x auto role region tabindex 0 and aria label resource table on a narrow screen only the table scrolls sideways so the page stays in place and the actions column is reachable by scrolling the table and a keyboard user can focus the container even when no row has a focusable element on a wide screen the container never scrolls and the table keeps the full width of its parent source libs material src lib resource table resource table html and resource table css libs tailwind src lib resource table resource table html long values in a data cell stay on one line cut at 12rem with an ellipsis and the full value is in the cell s title the show page renders the whole value cells align to the top the actions column is not truncated and does not wrap so its buttons stay on one line source libs material src lib resource table resource table css and resource table html libs tailwind src lib resource table resource table html resourceform inputs and outputs input output type required what it does mode create edit yes form mode determines validation rules and what save emits source libs material src lib resource form resource form ts line 57 fields field yes fields to render one input per editable non readonly field source same file line 58 value t yes draft values bound through a linkedsignal never mutating the caller s input source same file line 59 pending boolean no default false while true the form disables submit and ignores further submissions source same file line 60 save output partial t emits when the user submits only fields actually changed filtered through buildresourcepayload source same file line 61 behaviour behaviour when only changed fields are sent in save unchanged fields are dropped from the payload so the server s own default or null applies instead of a client placeholder always source libs core src lib resource form payload ts lines 34 48 buildresourcepayload on create a boolean or number without hasdefault sends the value shown unchecked checkbox false empty number input 0 create mode only source same file lines 15 23 isshownvaluesentoncreate on edit save emits nothing when nothing changed edit mode with no dirty fields source resource form ts lines 142 144 readonly fields are neither rendered nor sent always source same file line 77 editablefields validation by type with format patterns for date timestamp time numeric an empty input on those types blocks submit unless nullable true always source libs core src lib field presentation ts lines 18 25 pattern lines 36 41 empty means no value resource form ts lines 90 96 isrequiredwhenempty submit blocked while invalid in create mode blocking starts immediately in edit mode only after the field is touched and dirty invalid depends on shouldblocksubmit mode dirty invalid source libs core src lib resource form payload ts lines 50 56 resourceform is remounted per resource and per record via for r of key track r keyed on resource name or resource id so signal forms do not carry stale dirty state across navigations source docs design notes md line 107 choosing a layer ui layers compares material and tailwind and says what the generator writes for each one edit this page on github pager previous page core next page cli mit licensed inspired by refine not affiliated with angular or refine pidrang