# presentation/renderers/table.renderer.ts

> 44 lines of code and 10 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-table-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.b1fb01c64003a8fb760d1b27f990a0b15d22a7219140eb36e92721257aef65bb.generated.txt

## Definitions

- `renderCell` (lexical_declaration, line 10)
- `renderTable` (lexical_declaration, line 45, exported)
- `renderHead` (lexical_declaration, line 23)
- `renderBody` (lexical_declaration, line 32)
- `KEYWORD_COLUMNS` (lexical_declaration, line 5)
- `element` (lexical_declaration, line 11)
- `body` (lexical_declaration, line 33)
- `row` (lexical_declaration, line 35)
- `className` (lexical_declaration, line 46, exported)
- `table` (lexical_declaration, line 47, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [presentation/renderers/text.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/text.renderer.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)

## Source

```typescript
import type { TableBlock, TableTone } from "#types/block.types";
import { appendChildren, createElement } from "#core/factories/element.factory";
import { fillMarkup } from "#presentation/renderers/text.renderer";

const KEYWORD_COLUMNS: ReadonlyMap<TableTone, number> = new Map([
    ["keyword", 1],
    ["contrast", 2],
]);

const renderCell = function renderCell(cell: string, index: number, tone: TableTone | undefined): Element {
    const element = createElement("td", {});
    if (tone === "role" && index === 0) {
        element.append(fillMarkup(createElement("strong", {}), cell));
        return element;
    }
    if (tone !== undefined && index < (KEYWORD_COLUMNS.get(tone) ?? 0)) {
        element.append(createElement("code", { className: "keyword", text: cell }));
        return element;
    }
    return fillMarkup(element, cell);
};

const renderHead = function renderHead(headers: readonly string[]): Element {
    const row = createElement("tr", {});
    appendChildren(
        row,
        headers.map((header) => fillMarkup(createElement("th", {}), header)),
    );
    return createElement("thead", { children: [row] });
};

const renderBody = function renderBody(block: TableBlock): Element {
    const body = createElement("tbody", {});
    for (const cells of block.rows) {
        const row = createElement("tr", {});
        appendChildren(
            row,
            cells.map((cell, index) => renderCell(cell, index, block.tone)),
        );
        body.append(row);
    }
    return body;
};

export const renderTable = function renderTable(block: TableBlock): Element {
    const className = block.tone === undefined ? "block-table" : `block-table ${block.tone}`;
    const table = createElement("table", { children: [renderHead(block.headers), renderBody(block)] });
    return createElement("div", { children: [table], className });
};
```