Data Components
useNucleusEntity, DataTable, FormBuilder & EntityShowcase
These four turn an entity definition into a working data UI. useNucleusEntity is the data engine (CRUD + pagination + search/sort/filter over the generated actions); DataTable renders rows; FormBuilder renders the create/edit form straight from your columns; and NucleusEntityShowcase wires all three into a complete admin screen for a table with almost no glue.
Because they all speak the same NucleusColumn shape your config already declares, the table, the form and the validation stay in lock-step with the schema — change a column and they follow.
useNucleusEntity#
The hook that does the data work. Give it an entity and your apiActions and it returns the rows plus everything needed to page, search, sort, filter and mutate them — each operation routed to that table's generated action.
data + metaitems / paginationOptionalitems, the pagination meta (page, totalItems, totalPages, hasNextPage…), isLoading and isLoadingMore — ready to feed a table or list.
mutationsadd / update / delete / bulkOptionaladdItem, updateItem, deleteItem plus bulkAdd / bulkDelete, all calling the generated CRUD/bulk actions and updating local state so the UI reflects the change immediately.
query statesearch / sort / filterOptionalHolds the search term, sort and filter conditions and re-fetches through the Query API; loadMore appends the next page (de-duplicated) for infinite lists.
DataTable#
A generic, headless-leaning data grid. It's typed on your row shape and supports inline editing, column/row resizing, sorting, selection and infinite scroll — pair it with useNucleusEntity or any data source.
columns / actionColumnsColumnDefinition<T>[]OptionalEach column sets header, width bounds, sortable / resizable / editable and optional cellRenderer / headerRenderer. editable columns get an editConfig (text / number / select / textarea). actionColumns render buttons per row.
configDataTableConfigOptionalToggles: isFrontendSort vs server sort, enableInfiniteScroll + threshold + pageSize, enableSelection, column/row resize and defaults. autoFetchUntilScroll keeps loading until the viewport fills.
callbacksDataTableCallbacks<T>OptionalonCellClick / onCellDoubleClick / onCellEdit, onSort, onLoadMore, onColumnResize / onRowResize — wire these to useNucleusEntity's loadMore / updateItem / sort to get a live editable grid.
statesloading / empty / selectionOptionalisLoading / isLoadingMore / hasMoreData drive skeletons and the infinite-scroll sentinel; emptyMessage and a selectionToolbar (over selected rows) round out the UX.
FormBuilder#
Renders a typed add/edit form from a NucleusColumn[] — the same column definitions your entity uses — with validation derived from each column. It's the write side that complements useNucleusEntity + DataTable.
columns + modeNucleusColumn[] · 'add' | 'edit'OptionalThe columns to render, in add or edit mode with initialValues. Field types map from the column type (number, boolean, date via DatePicker, enum via SelectBox, etc.).
validationColumnValidationOptionalminLength / maxLength / min / max / pattern / format (email, url, uuid, ipv4…) come straight off the column, mirroring the server's validatePayload — so client and API agree on what's valid.
fieldConfigsper-field overridesOptionalOverride label, placeholder, helperText, options / fetchOptions (async selects), span and order, custom render, and conditional visibility via dependsOn + showWhen — without leaving the column-driven model.
layout + useFormBuildervertical | horizontal | inlineOptionalGrid layout, size and column span control the look; the underlying useFormBuilder hook (state, setValue, validate, submit, getFieldProps) is exposed for fully custom forms.
NucleusEntityShowcase#
The batteries-included option: a complete CRUD surface for one entity — list (DataTable) + create/edit (FormBuilder) + detail — assembled over useNucleusEntity. The fastest path from 'I declared a table' to 'I have an admin screen'.
entity + apiActionsNucleusEntityOptionalPoint it at an entity and the generated actions; it infers columns, renders the grid and forms, and handles create/edit/delete and paging end to end.
Related sections