Create Data Table Record

Component Description(Generated by AI)

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

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

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 Component

Data Tables

Table List View (Data Tables)

This component requires an accompanying script. The component includes two tables by default, one showing all records and one filtered to the current member but you can keep either (or both) and update the following attribute values to match your data table and fields: ms-code-table — set to your data table name on each table wrapper (default: "todos") ms-code-sort — set to the field and direction for sorting (e.g. createdAt:desc). Server-managed fields are createdAt / updatedAt; custom fields use the field key from your table ms-code-per-page — set to the number of rows 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 table wrapper to filter records by the logged-in member; omit it to show all records regardless of owner data-ms-field on each <td> — set to the matching field key in your table ms-field on each <td> — set to the field type: text, number, date, checkbox, html, image, or link Key Features Supports multiple independent tables on the same page — each table is configured and paginated on its own Optional owner filtering: include ms-code-owner-field to show only the logged-in member's records, omit it to show every record in the table Renders a row for each record using a cloneable template pattern inside <tbody> Binds data-ms-field cells 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 in each row with the record ID as a query parameter Client-side pagination with configurable page size, numbered page buttons, and previous/next navigation with disabled state styling Supports sorting by any field in ascending or descending order Four distinct UI states: loading, populated list, empty, and error Retry button on error state to re-attempt the fetch Using One Table vs Two The default component ships with two tables to demonstrate both modes side by side. To use only one, delete the other wrapper. To add more, duplicate a wrapper and adjust its settings — the script automatically initializes every element with data-ms-code="list-container". Potential Use Cases Any Memberstack-powered site that needs a structured record list with sortable columns and row-level actions Admin dashboards, task lists, CRM contact tables, order histories, inventory views, and more Swap the table name and fields to match any data model — the script handles the rest

View All Components