Data Table State Management

Component Description(Generated by AI)

Loading State

Shown while the script fetches records from the data table. Keep it brief, reassuring, and under one line. Appears in elements with data-ms-code="list-loading", data-ms-code="edit-loading", data-ms-code="detail-loading", or data-ms-code="delete-loading".

Short: Loading…
Medium: Loading records…
Friendly: Just a moment, fetching your data…
Context-aware: Loading your todos… / Loading project details… / Preparing delete confirmation…

Empty State

Shown when the query returns zero records. Do two things: confirm the list is genuinely empty, and invite the next action (create, import, invite, etc.). Appears in elements with data-ms-code="list-empty".

Short: No records found.
Medium: You have no todos yet. Add one to get started.
Friendly: Nothing here yet — create your first todo and it will show up here.
Owner-filtered (my records): You haven't created any todos yet. Hit "New Todo" to add one.
All records: No todos have been created yet across the table.

Recommended pairing: always include a visible call-to-action button inside or next to the empty state (e.g. "New Todo", "Add Record", "Invite a member").

Error State

Shown when the fetch, create, update, or delete call fails. Be honest about what happened, avoid exposing technical details, and offer a way forward (retry, reload, contact). Appears in elements with data-ms-code="list-error", data-ms-code="edit-error", data-ms-code="detail-error", data-ms-code="form-error", or data-ms-code="delete-error".

Short: Something went wrong.
Medium: Could not load records. Please try again.
Friendly: We hit a snag loading your todos. Give it another try in a moment.
With retry link: Could not load records. Try again
Form-level error: We couldn't save your changes. Check your connection and try again.
Permissions error: You don't have access to this record.
Not found: This record could not be found — it may have been deleted.

Recommended pairing: include a retry trigger (data-ms-action="retry") or a link back to the list view so users are never stuck.

Bonus: Success State

Shown briefly after a create, update, or delete succeeds. Appears in elements with data-ms-code="form-success" or data-ms-code="delete-success".

Create: Todo added. / Record created successfully.
Update: Changes saved. / Todo updated.
Delete: Todo deleted. Redirecting you back to the list…

Related Components

More components you might find useful

View All

View Component

Data Tables

Edit Data Table Records

This component requires an accompanying script. Update the following attribute values in the HTML to match your data table and fields before use: ms-code-table — set to your data table name (default: "todos") ms-code-id-param — set to the URL query parameter that holds the record ID (default: id) ms-code-owner-field — set to the field that stores the member ID ms-code-redirect — (optional) set to the page URL to redirect after a successful update data-ms-field on each input — set to the matching field key in your table ms-field on each input — set to the field type: text, number, date, checkbox, html, image, or link Look for /* CUSTOMIZE */ comments in the script for additional options Linking from the Card List View The Card List View component generates a link on each card using ms-code-detail-page and ms-code-id-param. To have cards link to this edit page: Set ms-code-detail-page on the Card List View wrapper to the URL of your edit page (e.g. /edit) Make sure ms-code-id-param matches on both components (default: id) The card link will resolve to something like /edit?id=abc123, and this component reads that ID on load. Key Features Reads the record ID from the URL query string and fetches the existing record on page load Pre-populates all form fields with saved values, handling every ms-field type: text and html set the input value, number sets the value directly, date converts ISO to YYYY-MM-DD for the date picker, checkbox sets the checked state, image and link set URL values Updates the record in place via Memberstack's updateDataRecord API on submit Collects fields on submit with full type awareness: number parses to float, date converts to ISO, checkbox reads checked state, text/html/image/link pass raw strings Authenticates the current member and stamps the owner field on every save Shows loading, success, and error states with smooth fade-in transitions Gracefully handles missing or deleted records with an inline error message Supports optional redirect after successful update Potential Use Cases Any Memberstack-powered site that needs a user-facing edit form tied to a data table Task managers, project trackers, CRMs, support ticket systems, inventory updates, and more Swap the table name and fields to match any data model — the script handles the rest

View Component

Data Tables

Create Data Table Record

This component requires an accompanying script. Update the following attribute values in the HTML to match your data table and fields before use: ms-code-table — set to your data table name (default: "todos") ms-code-owner-field — set to the field that stores the member ID ms-code-redirect — (optional) set to the page URL to redirect after success data-ms-field on each input — set to the matching field key in your table ms-field on each input — set to the field type: text, number, date, checkbox, html, image, or link Look for /* CUSTOMIZE */ comments in the script for additional options Key Features Auto-binds form inputs to data table columns via data attributes Handles every ms-field type when collecting values: text and html pass raw strings, number parses to float, date converts to ISO, checkbox reads the checked state, image and link pass URLs Authenticates the current member and stamps owner + creation date on every record Shows loading, success, and error states with smooth fade-in transitions Prevents Webflow's native form handler from hiding the form Supports optional redirect after successful creation Potential Use Cases Any Memberstack-powered site that needs a user-facing create form tied to a data table Task managers, project trackers, CRMs, support ticket systems, inventory forms, and more Swap the table name and fields to match any data model — the script handles the rest

View Component

Data Tables

View Data Table Records

This component requires an accompanying script. Update the following attribute values in the HTML to match your data table and fields before use: ms-code-table — set to your data table name (on both the wrapper and the template; default: "todos") ms-code-sort — set to the field and direction for sorting (e.g. created_at:desc) ms-code-per-page — set to the number of cards to show per page ms-code-detail-page — set to the URL of the detail/edit page (e.g. /edit) ms-code-id-param — set to the URL query parameter name for the record ID (default: id) ms-code-owner-field — (optional) set on the template to filter records by the logged-in member data-ms-field on each display element — set to the matching field key in your table ms-field on each display element — set to the field type: text, number, date, checkbox, html, image, or link Key Features Fetches all records from the specified Memberstack data table on page load Renders a card for each record using a cloneable template pattern Binds data-ms-field elements to record values with full type-aware rendering: text sets textContent, number formats with locale separators, date formats to a readable string, checkbox displays "Yes" or "No", html sets innerHTML, image sets src, link sets href Generates detail page links with the record ID as a query parameter Client-side pagination with configurable page size Numbered page buttons, previous/next navigation with disabled state styling Supports sorting by any field in ascending or descending order Optional owner filtering to show only the logged-in member's records Four distinct UI states: loading, populated list, empty, and error Retry button on error state to re-attempt the fetch Potential Use Cases Any Memberstack-powered site that needs a browsable record list with card layout Task managers, project dashboards, CRM contact lists, product catalogs, and more Swap the table name and fields to match any data model — the script handles the rest

View Component

Data Tables

Delete Data Table Records

This component requires an accompanying script. Update the following attribute values in the HTML to match your data table and fields before use: ms-code-table — set to your data table name (default: "todos") ms-code-id-param — set to the URL query parameter that holds the record ID (default: id) ms-code-owner-field — set to the field that stores the member ID for ownership checks ms-code-redirect — set to the page URL to redirect after a successful delete (e.g. /todos) data-ms-field on display elements — set to the matching field key in your table ms-field on display elements — set to the field type: text, number, date, checkbox, html, image, or link Look for /* CUSTOMIZE */ comments in the script for additional options including delete mode (hard vs soft) Linking from the Card List View The Card List View component generates a link on each card using ms-code-detail-page and ms-code-id-param. To have cards link to this delete page: Set ms-code-detail-page on the Card List View wrapper to the URL of your edit page (e.g. /delete) Make sure ms-code-id-param matches on both components (default: id) The card link will resolve to something like /delete?id=abc123, and this component reads that ID on load. Key Features Reads the record ID from the URL query string and fetches the record on page load Displays the record name in the confirmation prompt so the user knows what they are deleting Verifies the current member owns the record before allowing deletion Supports two delete modes: hard delete via deleteDataRecord and soft delete via updateDataRecord with configurable field keys Handles every ms-field type when displaying record data: text sets textContent, number formats with locale separators, date formats to a readable string, checkbox displays Yes or No, html sets innerHTML, image sets src, link sets href Confirm and Cancel buttons with loading state on the confirm action Shows success message and redirects after deletion, or displays an error if it fails Cancel button navigates to a configurable URL or falls back to browser history Potential Use Cases Any Memberstack-powered site that needs a safe, user-facing delete workflow tied to a data table Task managers, project trackers, CRMs, support ticket systems, and more Swap the table name and fields to match any data model — the script handles the rest

View All Components