MarkdownTable – Code – React Native

Implementation
MarkdownTable Props

import {
  MarkdownTable,
  MarkdownTableCell,
  MarkdownTableHeaderCell,
  MarkdownTableRow,
} from "@servicetitan/anvil2-rn";

function App() {
  return (
    <MarkdownTable
      content={
        <>
          <MarkdownTableRow
            isHeaderRow
            content={
              <>
                <MarkdownTableHeaderCell content="Month" />
                <MarkdownTableHeaderCell content="Revenue" />
              </>
            }
          />
          <MarkdownTableRow
            isLastRow
            content={
              <>
                <MarkdownTableCell content="January" />
                <MarkdownTableCell content="$42,300" />
              </>
            }
          />
        </>
      }
    />
  );
}

Common Examples

MarkdownTable is a rendering target, not a markdown parser: wire it into the table / tr / th / td rules of whatever markdown library your app uses (for example react-native-markdown-display), passing each node’s already-rendered children through as content.Four components, used together, because a table’s row/column structure can’t be expressed as one flat prop:

MarkdownTable — the outer bordered, rounded shell with horizontal scroll.
MarkdownTableRow — one row; set isHeaderRow on the header row and isLastRow on the final row.
MarkdownTableHeaderCell / MarkdownTableCell — the cells within a row.

This matches the web kit’s MarkdownTable (@servicetitan/anvil2-ai-kit), not the general Table internal component — that one is a data grid with sorting and row selection; this one only renders what a markdown parser hands it.

Column widths

React Native has no HTML table-layout auto-sizing, so cells split the row equally (flex: 1) unless every cell in a column is given the same explicit width — the way to keep columns lined up across rows.

<MarkdownTableRow
  isHeaderRow
  content={
    <>
      <MarkdownTableHeaderCell width={90} content="SKU" />
      <MarkdownTableHeaderCell width={180} content="Description" />
    </>
  }
/>
<MarkdownTableRow
  isLastRow
  content={
    <>
      <MarkdownTableCell width={90} content="A-1029" />
      <MarkdownTableCell width={180} content="Condenser fan motor" />
    </>
  }
/>

A table wider than its container scrolls horizontally; there’s nothing extra to configure for that.

Alignment

align on a cell follows the markdown table’s own column alignment syntax (:--, :-:, --:) — "start" (default), "center", or "end".

<MarkdownTableCell align="end" content="$129.00" />

Not implemented yet

The web kit’s sticky header-on-scroll and scroll-edge fade gradients aren’t in the React Native version: React Native has no CSS position: sticky, and reproducing the effect needs a measure-and-sync two-scroll-view approach.

<MarkdownTable content={<MarkdownTableRow content={<MarkdownTableCell content="x" />} />} />

`MarkdownTable` Props

ReactNode

required

The table’s rows, in order — one or more MarkdownTableRow elements.

string

Test hook forwarded to the root element.

`MarkdownTableRow` Props

ReactNode

required

The row’s cells — MarkdownTableHeaderCell or MarkdownTableCell elements.

boolean

default:"false"

Paints the row with the header fill.

boolean

default:"false"

Clears the row’s own bottom divider, so the table doesn’t double it up with its own bottom edge.

string

Test hook forwarded to the row’s root element.

`MarkdownTableHeaderCell` / `MarkdownTableCell` Props

Both cell components accept the same props.

ReactNode

required

The cell’s rendered content — typically inline markdown (text, links, emphasis).

"start" | "center" | "end"

default:"start"

Text alignment within the cell.

number

Fixed column width in dp. Omit to share the row’s width equally with sibling cells.

string

Test hook forwarded to the cell’s root element.

​Common Examples

​Column widths

​Alignment

​Not implemented yet

​MarkdownTable Props

​MarkdownTableRow Props

​MarkdownTableHeaderCell / MarkdownTableCell Props

Common Examples

Column widths

Alignment

Not implemented yet

`MarkdownTable` Props

`MarkdownTableRow` Props

`MarkdownTableHeaderCell` / `MarkdownTableCell` Props