lwc-datatable-advanced
Advanced lightning-datatable patterns — inline edit + draftValues, custom cell types via extending LightningDatatable, sortable columns, infinite scroll with onloadmore, row-level errors, and the cost of large data sets. NOT for read-only display of small lists (plain lightning-datatable suffices) or fully custom grids (use a third-party library).
Best use case
lwc-datatable-advanced is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Advanced lightning-datatable patterns — inline edit + draftValues, custom cell types via extending LightningDatatable, sortable columns, infinite scroll with onloadmore, row-level errors, and the cost of large data sets. NOT for read-only display of small lists (plain lightning-datatable suffices) or fully custom grids (use a third-party library).
Teams using lwc-datatable-advanced should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/lwc-datatable-advanced/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How lwc-datatable-advanced Compares
| Feature / Agent | lwc-datatable-advanced | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Advanced lightning-datatable patterns — inline edit + draftValues, custom cell types via extending LightningDatatable, sortable columns, infinite scroll with onloadmore, row-level errors, and the cost of large data sets. NOT for read-only display of small lists (plain lightning-datatable suffices) or fully custom grids (use a third-party library).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# LWC Datatable Advanced
`lightning-datatable` ships with the patterns that turn it into a
real grid: inline edit with batched save, sortable columns, row
selection, row actions, infinite scroll via `onloadmore`, custom
cell types via subclassing, and row-level errors that highlight
specific cells. The hard part is composing them together without
fighting the framework.
The recurring shape is: rows come from `@wire(getRecords)` or an
Apex method, columns are a JS array with `editable: true` flags,
the user changes cells, the table emits `draftValues` on Save,
the controller calls `updateRecord` (one per row, in parallel) and
clears drafts on success / surfaces row-level errors on failure.
Infinite scroll layers on by setting `enable-infinite-loading`
and handling `onloadmore`. Custom cell types layer on by importing
`LightningDatatable` and extending it.
The mistakes are about state management. Engineers persist `data`
as an array reference and mutate it (LWC reactivity drops);
engineers don't dedupe row IDs across pages (infinite scroll
duplicates rows on hot reload); engineers fire `updateRecord`
sequentially in a loop and burn 30 seconds on 50 rows when they
could `Promise.all` the lot.
## Recommended Workflow
1. **Define columns as a class field, not in the template.** A
JS array `columns = [{label, fieldName, type, editable, sortable}]`
with `data` and `draftValues` is the canonical shape. Inline
`<lightning-datatable columns={...}>` is harder to read.
2. **Bulkify the inline-edit save.** On `onsave`, build an array
of `{fields: {Id, ...changedFields}}` from `event.detail.draftValues`,
then `Promise.all(updateRecord(...))` them. Sequential saves
make 50-row commits feel broken.
3. **Reset `draftValues` only after the save succeeds.** Setting
`this.draftValues = []` on submit clears the drafts but loses
the user's edits if the save fails mid-flight. Reset in the
`then` of `Promise.all`.
4. **For sorting, decide client-side vs server-side up front.**
Client-side: implement `sortBy` / `sortDirection` and mutate a
local copy of `data`. Server-side: refetch with the new sort,
reset infinite scroll. Mixing the two leads to inconsistent
ordering after pagination.
5. **For infinite scroll, dedupe by row Id on every append.** A
refresh or hot reload can cause the same row to be appended
twice. `data = [...data, ...newRows.filter(n => !existing.has(n.Id))]`.
6. **Custom cell types: extend `LightningDatatable`.** Import
`LightningDatatable` from `lightning/datatable`, register the
custom type with a template. The template runs in the table's
shadow DOM, not your component's — class names must come from
SLDS or be set via `--slds-c-*` tokens.
7. **Show row-level errors via `errors` attribute.** Map
`{rowId: {messages, fieldNames, title}}` after a failed save
so the user sees the exact cell that failed.
## What This Skill Does Not Cover
- **Fully custom grids (AG Grid, Tabulator)** — use those libraries
in their own LWC wrapper; outside this skill's scope.
- **Read-only datatables for fewer than ~50 rows** — plain
`lightning-datatable` with no extensions is sufficient.
- **Tree grids** — see `lwc/lwc-tree-grid`.Related Skills
lwc-custom-datatable-types
Use when you need to extend `lightning-datatable` with custom cell renderings: status pills, progress bars, image thumbnails, action cells, editable pickliststo, rich-text, or any column that `lightning-datatable` does not ship out of the box. Triggers: 'custom cell type lightning datatable', 'progress bar column', 'image column', 'inline edit picklist in datatable', 'rich text column'. NOT for basic datatable usage (see `lwc-data-table`) and NOT for tree-grid or large-dataset virtualization (see `virtualized-lists`).
devops-center-advanced
Use DevOps Center for work item tracking, org-based release pipelines, and merging into existing SFDX workflows. NOT for first-time setup.
multi-currency-and-advanced-currency-management
Use when designing or reviewing Salesforce multi-currency behavior, especially irreversible activation, `CurrencyIsoCode`, `convertCurrency()`, dated exchange rates, and Advanced Currency Management tradeoffs. Triggers: 'multi currency', 'advanced currency management', 'CurrencyIsoCode', 'dated exchange rate', 'convertCurrency'. NOT for ordinary numeric field calculations with no currency conversion or reporting concern.
lightning-app-builder-advanced
Advanced Lightning App Builder usage: component visibility filters, custom page templates, Dynamic Forms, Dynamic Actions, page performance optimization, LWC targetConfig for record pages. Use when building complex record pages or custom app templates. NOT for basic page layout configuration. NOT for LWC component development (use lwc/* skills). NOT for Dynamic Forms basics (use dynamic-forms-and-actions).
xss-and-injection-prevention
Use when writing or reviewing Visualforce pages, Apex controllers, or LWC components that output user-supplied data, build dynamic queries, or construct HTTP responses. Triggers: 'XSS in Visualforce', 'SOQL injection vulnerability', 'how to encode output in Apex', 'JSENCODE Visualforce', 'open redirect prevention'. NOT for Apex CRUD/FLS enforcement (use soql-security or apex-crud-and-fls), NOT for Shield encryption (use shield-encryption-key-management), NOT for AppExchange security review process (use secure-coding-review-checklist).
visualforce-security-and-modernization
Use when hardening or modernizing legacy Visualforce pages — covers the platform CSRF token model and when disabling it is a security regression, view state encryption guarantees and the 170 KB ceiling, FLS/CRUD enforcement gaps on `<apex:outputField>` and on getters that return sObjects, `<apex:includeScript>` interaction with the org Content Security Policy, hosting LWC inside a VF page via `lightning:container` / `lightning-out`, and the retire-vs-harden-vs-leave-alone decision for an inventory of legacy pages. Triggers: 'should I rewrite this Visualforce page in LWC', 'CSRF protection disabled on Visualforce page is that safe', 'community user sees a field they should not on a Visualforce page', 'view state encryption is that enough for sensitive data', 'how do I host an LWC inside a Visualforce page', 'apex:dynamicComponent and apex:actionFunction safe to keep'. NOT for greenfield Visualforce architecture (use apex/visualforce-fundamentals — controller types, view state pattern selection, PDF rendering); NOT for Visualforce email template authoring (use apex/visualforce-email-templates if/when that skill is authored); NOT for general Apex security review across triggers and async (use apex/soql-security and security/secure-coding-review-checklist).
transaction-security-policies
Transaction Security policy creation and configuration: condition builder, enhanced policies, enforcement actions (block, MFA, notification, end session), real-time monitoring mode, and policy troubleshooting. NOT for Event Monitoring log analysis or Shield Event Monitoring setup (use event-monitoring). NOT for Apex testing or debug-log analysis.
sso-saml-troubleshooting
Diagnosing broken SAML SSO into Salesforce — IdP-initiated vs SP-initiated flows, signing-certificate validity / expiry, NameID format mismatches, RelayState handling, audience / entityId / issuer mismatches, clock skew, the SAML Assertion Validator in Setup, the Login History debug log, and the My Domain prerequisite for SSO. Covers the standard diagnostic loop: read the SAML response, identify which check failed, fix at the IdP or SP. NOT for OAuth / OpenID Connect SSO (see security/oauth-openid-troubleshooting), NOT for setting up SSO from scratch (see security/sso-saml-setup).
shield-kms-byok-setup
Configure Shield Platform Encryption with customer-supplied (BYOK) or customer-held (Cache-Only Key Service) tenant secrets, rotate them, and recover. NOT for Classic Encryption or field masking.
shield-event-log-retention-strategy
Use when designing Salesforce Shield Event Monitoring retention, SIEM routing, and storage-tier strategy — which event types to keep, for how long, where, and how to answer audit queries across hot/warm/cold tiers. Triggers: 'shield event log retention', 'route event monitoring to splunk', 'how long to keep login history', 'siem salesforce integration', 'event monitoring storage tier'. NOT for enabling Shield (see salesforce-shield-deployment).
session-management-and-timeout
Use this skill when configuring session timeout values, concurrent session limits, session IP locking, or logout behavior in Salesforce. Covers org-wide session settings, profile-level overrides, Connected App session policies, and Metadata API SecuritySettings deployment. NOT for OAuth token refresh flows, login IP ranges, or MFA/identity-provider configuration.
session-high-assurance-policies
Enforce step-up authentication for sensitive pages/objects using High Assurance session level and login flow policies. NOT for initial MFA enrollment UX.