Recipe: custom columns

The MVP component ships a fixed headline table layout (sha, message, refs, author, time). For arbitrary column sets, drop down to the <GitGraphGutter> primitive and render your own table next to it.

// MVP does not expose a compound API (e.g. <GitGraph.Row>).
// To pair the lane gutter with your own table content, render
// <GitGraphGutter> next to a sibling table that uses the same row height.

import GitGraphGutter from "@/components/git-graph/git-graph-gutter";
import { computeLayout } from "@/components/git-graph/lib/layout";

const layout = computeLayout(commits);
const ROW_HEIGHT = 40;

return (
  <div style={{ display: "flex" }}>
    <GitGraphGutter layout={layout} rowHeight={ROW_HEIGHT} />
    <table>
      <tbody>
        {layout.rows.map((r) => (
          <tr key={r.commit.sha} style={{ height: ROW_HEIGHT }}>
            <td>{r.commit.sha.slice(0, 7)}</td>
            <td>{r.commit.message}</td>
            <td>{/* your custom column */}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

Constraints