{"record":{"id":"f1ac19d4cb9df32a","repo":"facebook/docusaurus","slug":"bad-usage-of-apitable-component-it-is-probably-th","errorCode":null,"errorMessage":"Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.","messagePattern":"Bad usage of APITable component\\.\nIt is probably that your Markdown table is malformed\\.\nMake sure to double-check you have the appropriate number of columns for each table row\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"website/src/components/APITable/index.tsx","lineNumber":91,"sourceCode":"      }}\n      onKeyDown={(e: React.KeyboardEvent) => {\n        if (e.key === 'Enter') {\n          history.push(anchor);\n        }\n      }}>\n      {children.props.children}\n    </tr>\n  );\n}\n\n/*\n * Note: this is not a quite robust component since it makes a lot of\n * assumptions about how the children looks; however, those assumptions\n * should be generally correct in the MDX context.\n */\nexport default function APITable({children, name}: Props): ReactNode {\n  if (children.type !== 'table') {\n    throw new Error(\n      'Bad usage of APITable component.\\nIt is probably that your Markdown table is malformed.\\nMake sure to double-check you have the appropriate number of columns for each table row.',\n    );\n  }\n  const [thead, tbody] = React.Children.toArray(children.props.children) as [\n    ReactElement<{children: ReactElement[]}>,\n    ReactElement<{children: ReactElement[]}>,\n  ];\n  const highlightedRow = useRef<HTMLTableRowElement>(null);\n  useEffect(() => {\n    highlightedRow.current?.focus();\n  }, [highlightedRow]);\n  const rows = React.Children.map(\n    // @ts-expect-error: TODO fix typing\n    tbody.props.children,\n    (row: ReactElement<ComponentProps<'tr'>>) => (\n      <APITableRow name={name} ref={highlightedRow}>\n        {row}\n      </APITableRow>","sourceCodeStart":73,"sourceCodeEnd":109,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/website/src/components/APITable/index.tsx#L73-L109","documentation":"<APITable> expects exactly one child that is an MDX-rendered <table> element. The component checks children.type !== 'table' and throws up front because it then destructures thead/tbody from the table's children. A non-table child (a wrapper div, a pre block, or anything produced by a malformed markdown table) fails this guard.","triggerScenarios":"Wrap the markdown table in a <div> or another element before APITable; write malformed markdown (missing header separators, uneven column counts) so MDX does not emit a table element; pass a code fence or paragraph as the child.","commonSituations":"Markdown table syntax errors (missing the `|---|---|` separator row, mismatched column counts); wrapping APITable around content that is not a table; JSX-in-MDX inserting an element between APITable and the table.","solutions":["Fix the markdown table so MDX emits a real <table> (verify the separator row and equal column counts).","Make the table the direct, sole child of <APITable> (no wrapping div/fragment).","If you must wrap, wrap outside APITable, not between APITable and the table."],"exampleFix":"// before (malformed / wrapped)\n<APITable>\n  <div>\n    | col |\n    | --- |\n    | a |\n  </div>\n</APITable>\n// after\n<APITable>\n  | col |\n  | --- |\n  | a |\n</APITable>","handlingStrategy":"validation","validationCode":"function assertAPITableChild(children: React.ReactNode) {\n  if (!React.isValidElement(children) || children.type !== 'table') {\n    throw new Error(\n      '<APITable> requires a single <table> child (rendered from a markdown table)',\n    );\n  }\n}","typeGuard":"const isTableElement = (\n  c: React.ReactNode,\n): c is React.ReactElement<React.ComponentProps<'table'>> =>\n  React.isValidElement(c) && c.type === 'table';","tryCatchPattern":null,"preventionTips":["Always feed APITable a directly-rendered markdown table as its only child.","Double-check the `|---|---|` separator row and equal column counts in the markdown.","Never wrap the table in a div or fragment between APITable and the table."],"tags":["apitable","mdx","props-validation"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}