EDU-18464 | New table component to Help Center

[anabaarbosa]

What is the purpose of this pull request?

Component for rendering data tables in any Help Center documentation, with search, sorting, and pagination capabilities (via DataTables). The idea is to have the column configuration in MDX and the data in an external JSON in help-center-content, referenced by src.

In the .md file, the table will be created using the tag:

<DataTable
  src="/data/tables/payment-providers.json"
  columns={[
    { key: "country", label: "País", type: "text", filterable: true },
    { key: "provider", label: "Provedor", type: "link", urlKey: "docsUrl", sortable: true },
    { key: "payoutSplit", label: "Split de pagamentos", type: "boolean", filterable: true }
  ]}
/>

The table data in the .JSON file can be formatted as plain rows or by locale:

{
  "updatedAt": "2026-06-11",
  "rows": [
    { "country": "BR", "provider": "Aarin", "docsUrl": "https://...", "payoutSplit": true }
  ]
}

The DataTable component renders a

on the server and initializes DataTables on the client via dynamic import, without breaking SSR. Column types: text, link, boolean.
Data loading at build-time has been added: serializeWithFallback → getDataTablesData extracts the src from the tags, retrieves each JSON from the same branch as the documentation, resolves the rows for the current locale, and appends them to serialized.scope.dataTablesData. ArticleRender makes the data available via context (DataTablesProvider) and registers the component in MarkdownRenderer via customComponents.

The dependencies used were: datatables.net, datatables.net-dt.

How should this be manually tested?

Screenshots or example usage

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Requires change to documentation, which has been updated accordingly.

[netlify]

✅ Deploy Preview for leafy-mooncake-7c2e5e ready!

Name	Link
🔨 Latest commit	47e7d7b
🔍 Latest deploy log	https://app.netlify.com/projects/leafy-mooncake-7c2e5e/deploys/6a457ad79fc1cd000894a72b
😎 Deploy Preview	https://deploy-preview-477--leafy-mooncake-7c2e5e.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[julia-rabello]

muito bom! deixei alguns comentários com ajustes, mas para mim o caminho é esse mesmo, tá ficando excelente.

um detalhe: você pode adicionar instruções de teste? como os dados ficam no help-center-content e o componente fica aqui, não fica muito claro como testar isso só abrindo o PR. acabei criando um arquivo local manualmente para testar. o ideal seria uma branch de teste no help-center-content com um arquivo json de exemplo e um artigo mdx usando <DataTable>, para testar o fluxo completo sem precisar configurar tudo do zero.

[julia-rabello]

Added a few changes:

• Test page (delete before merging): /test-datatable
• Filter UI
• Flags: replaced flag emoji with flagcdn.com rectangular images, more neutral than those used in payment-providers-table https://flagpedia.net/download/api
• Badge/tag colors: switched to the Tag component from @vtexdocs/components for consistency with the rest of the dev portal
• Fixed cell alignment and nowrap
• Pagination: arrow symbols instead of translated words (« ‹ › »); current page now uses neutral gray instead of pink
• Unavailable state: added a warning box (yellow, matching the portal's callout style) with i18n strings in EN, PT, and ES when the data source can't be found
• Link column: simplified from two fields (key + urlKey) to a single value, either a plain URL or label markdown. The urlKey prop has been removed.
• Remove currencyKey from DataTableColumn, currency is column-level only
• Solved conflicts and linting issues.

[julia-rabello]

⚠️ test file - remove this file before merging