The form.sheet family of components allow for a spreadsheet-like design for complex forms, through minimal UI and column-based layout. These components are suitable for any sort of row- and column- based data entry, like line items in an invoice, or a table-based view of large amounts of editable data.

A Demo page shows these components in action within a Livewire component.

These components are most useful within a Livewire component, where they can react to one another, add/remove rows, etc.

In addition to traditional <input /> fields, some special components are available:

• <livewire:euikit-sheetimport> — Allows for importing into a sheet from a CSV file or pasted CSV text.

• <x-euikit:form.sheet.lookup> — A minimal version of the <x-euikit::form.lookup> component, for autocompleting a field from a list of models.

Sheet basics

Sheets begin with the <x-euikit::form.sheet> wrapper. This sets up a 12-column grid for aligning the various components that will make up the form.

A <x-euikit::form.sheet.header> component sets up the table headers.

Various sheet components, like form.sheet.text and form.sheet.number make up the form.

A special <x-euikit::form.sheet.actions> wrapper sets up a sheet area for row-based action buttons, which use the form.sheet.action component.

<x-euikit::form.sheet>

This is a wrapper around the whole sheet. It does not require any attributes, but it will honor any that are present (ie., class).

<x-euikit::form.sheet.header>

The form.sheet.header component acts as a column header for the sheet. It does not require any attributes, but will honor any that are present.

<x-euikit::form.sheet.text>

This component puts a text input field in the sheet. At this time, it requires no attributes. This is typically handled by Livewire's wire:model attribute.

<x-euikit::form.sheet.number>

This component puts a number input field in the sheet. At this time, it requires no attributes. This is typically handled by Livewire's wire:model.

<x-euikit::form.sheet.display>

The form.sheet.display component renders a <div> with a read-only value. It requires a value attribute.

Displayed values are locked to the display height and width of the cell, to preserve formatting. If the value is longer than the cell, the display will be truncated. Hovering over the field will display the entire value.

<x-euikit::form.sheet.actions>

This component is a wrapper around an area in the sheet where form.sheet.action buttons can reside. It will present as a button with an icon, sized in line with the sheet row. This is useful for actions like adding or deleting rows. It requires an icon attribute.

<x-euikit::form.sheet.action>

This component sets up an action for a row. This is typically handled by Livewire's wire:click attribute. The action is rendered as a single icon button, so the icon attribute is required.

The <livewire:euikit-sheetimport> Livewire component will offer an interface to import items into a sheet from either a CSV file or pasted CSV text. The component requires a fields variable be passed, which is an array listing the keys for import.

This Livewire component should be used in conjunction with another Livewire component that is the sheet's form. Upon successful import of items, this component will fire a imported Javascript Event, passing the items imported as a importedItems named parameter, holding the array of imported items. The sheet's form component must listen for this event, and handle the imported array.

The interface for importing is presented in a modal. The text area for importing via pasting will include a generated header row. This helps elucidate which fields are being imported, and the format they are expected to be in. The interface allows the presense or absense of the header row.

See the Form Sheet Demo to see these fields in action.