Table On Steroids Laravel Package

Getting Started

Install

composer require goellner/table-on-steroids

Statamic 3 addons are Laravel packages, so the service provider should be picked up by package discovery. If it isn't, register the provider (typically Goellner\TableOnSteroids\ServiceProvider) in config/app.php, then clear caches:

php artisan cache:clear
php artisan config:clear
php artisan statamic:stache:clear

No publish step is usually required, but check the repo's README for a vendor:publish tag if the front-end assets aren't loading.

Where to look first

1. vendor/goellner/table-on-steroids/src/ — the service provider tells you exactly what is registered (fieldtype, script, action, or modifier).
2. A blueprint with a table field: CP → Fields → create a Table field*, then open an entry using it. The CSV affordance appears in the Table field's UI (import/paste control), not in the blueprint editor.
3. vendor/goellner/table-on-steroids/resources/js/ (or dist/) — the Vue component shows the parsing behavior and accepted options.

First use case

The canonical use is "spec sheet" or "contact list" fields: someone maintains rows in Excel/Google Sheets, exports CSV, and pastes/uploads it into the Table field in the Control Panel instead of hand-typing dozens of rows. Define your Table field columns first (handles become the row keys), then import a CSV whose header row matches those handles. Save the entry and confirm the YAML in content/ contains the expected array of associative rows.

Implementation Patterns

Define the field with explicit columns

my_blueprint:
  fields:
    specs:
      type: table
      display: Specifications
      columns:
        label: Label
        value: Value
        unit: Unit

Importing only works reliably when the CSV headers map to these column handles. Treat the blueprint as the schema and the CSV as data.

Import at authoring time, not render time

The addon is a Control Panel convenience — it parses CSV into the field's array value, which is then saved as YAML. It does not keep a live link to the CSV file. If editors need to re-import after a spreadsheet change, they must re-run the import and save.

Render the result as a plain table array

<table>
  {{ specs }}
    <tr>
      <td>{{ label }}</td>
      <td>{{ value }}</td>
      <td>{{ unit }}</td>
    </tr>
  {{ /specs }}
</table>

Because the value is just an array, it also works in Blade via $entry->get('specs') and validates cleanly with array/nullable|array rules.

Server-side import for repeatable workflows

If the CSV is the source of truth, don't rely on the CP importer. Store the CSV in an assets field and parse it at render time with League\Csv or a custom modifier/tag. Alternatively, write a command that reads a CSV and calls $entry->set('specs', $rows)->save() — the addon's CP feature becomes irrelevant, but the stored data shape is identical, so you can migrate later.

Sanitize after import

Imported values are strings from a spreadsheet. If the table feeds a public table, strip/normalize in a computed field, a saved event listener, or a custom fieldtype that wraps the table fieldtype and cleans values before persisting.

Combine with an assets field for provenance

A common pattern: one assets field holding the uploaded CSV plus the table field holding the parsed rows. Editors can download the original while the front end renders the parsed data. Keep them in sync with a note in the field's instructions.

Gotchas and Tips

Statamic version lock-in. This is a Statamic 3-era addon. Statamic 4/5 changed the fieldtype front-end toolchain, so expect breakage on upgrade. Pin the package and test the CP before bumping Statamic. With no stars and no dependents, assume maintenance is on you — fork or vendor the JS if you need fixes.

CSV dialect is the #1 failure mode. Excel in European locales exports ; delimiters and , decimals; quoted fields can contain commas, newlines, and doubled quotes; files may be UTF-8 with BOM or Windows-1252. Test with a real export, not a hand-written CSV. If the parser is naive (str_getcsv-style), a semicolon file will collapse into one column.

Header/handle mismatch silently loses data. If CSV headers are Label,Value but column handles are label,value, rows may import with empty or ignored values. Decide whether the parser maps by position or by header, and keep them aligned.

Trailing blank lines become blank rows. Trim empty rows after import; array_filter on save or a quick manual cleanup in the CP.

Large files freeze the browser. Parsing runs client-side in the CP. A few thousand rows is fine; for bulk data, import server-side with a command and save the entry programmatically.

Debugging steps. Check the browser console for Vue errors first; confirm the addon's script tag is present in the CP's HTML (vendor/... path); if assets were published, re-run vendor:publish --force after an update; clear the Stache when blueprint/field changes don't appear.

Extension points. The useful seams are (a) the table fieldtype's column config, (b) a custom fieldtype that wraps this one to add sanitization, and (c) entry save listeners for normalization. Avoid patching vendor files — fork the repo if the parser's edge-case handling is the blocker.