Initializing playground…
← Back to roadmap

🔗 Merge — Interactive Playground

merge(left, right, options) performs SQL-style joins between two DataFrames — mirroring pandas.merge.
Four join types are supported: "inner" (default), "left", "right", and "outer".
Edit any code block below and press ▶ Run (or Ctrl+Enter) to execute it live in your browser.

1 · Basic inner merge

Returns only rows where the key exists in both DataFrames (SQL INNER JOIN). This is the default join type.

TypeScript 
import { DataFrame, merge } from "tsb";

const orders = DataFrame.fromColumns({
  orderId:    [1, 2, 3, 4],
  customerId: [10, 20, 10, 30],
  amount:     [100, 200, 150, 80],
});
const customers = DataFrame.fromColumns({
  customerId: [10, 20, 40],
  name:       ["Alice", "Bob", "Dave"],
});

// Default how="inner" — customers 30 and 40 have no match → excluded
const result = merge(orders, customers, { on: "customerId" });
console.log(result.toString());
Click ▶ Run to execute
Ctrl+Enter to run

2 · Left, Right, and Outer joins

"left" keeps all left rows, "right" keeps all right rows, and "outer" keeps all rows from both sides. Missing values are filled with null.

TypeScript 
import { DataFrame, merge } from "tsb";

const left  = DataFrame.fromColumns({ k: [1, 2], v: [10, 20] });
const right = DataFrame.fromColumns({ k: [2, 3], w: [200, 300] });

console.log("=== LEFT JOIN ===");
console.log(merge(left, right, { on: "k", how: "left" }).toString());

console.log("\n=== RIGHT JOIN ===");
console.log(merge(left, right, { on: "k", how: "right" }).toString());

console.log("\n=== OUTER JOIN ===");
console.log(merge(left, right, { on: "k", how: "outer" }).toString());
Click ▶ Run to execute
Ctrl+Enter to run

3 · Merge on different column names

When key columns have different names in each DataFrame, use left_on and right_on instead of on. Both key columns appear in the result.

TypeScript 
import { DataFrame, merge } from "tsb";

const employees = DataFrame.fromColumns({
  empId:  [1, 2, 3],
  salary: [50000, 60000, 70000],
});
const departments = DataFrame.fromColumns({
  id:   [2, 3, 4],
  dept: ["Eng", "HR", "Fin"],
});

// empId in left matches id in right
const result = merge(employees, departments, {
  left_on:  "empId",
  right_on: "id",
});
console.log(result.toString());
Click ▶ Run to execute
Ctrl+Enter to run

4 · Custom suffixes for overlapping columns

When both DataFrames share a non-key column name, tsb appends _x / _y by default. Override with the suffixes option.

TypeScript 
import { DataFrame, merge } from "tsb";

const left  = DataFrame.fromColumns({ id: [1, 2], score: [80, 90] });
const right = DataFrame.fromColumns({ id: [1, 2], score: [75, 95] });

// Default suffixes: _x and _y
console.log("=== Default suffixes ===");
console.log(merge(left, right, { on: "id" }).toString());

// Custom suffixes
console.log("\n=== Custom suffixes (_pre, _post) ===");
console.log(merge(left, right, {
  on:       "id",
  suffixes: ["_pre", "_post"],
}).toString());
Click ▶ Run to execute
Ctrl+Enter to run

🧪 Scratch Pad

Write your own merge code below. All exports from tsb are available: DataFrame, Series, merge, and more.

TypeScript — Scratch Pad 
import { DataFrame, merge } from "tsb";

// Try it! Build two DataFrames and explore the merge API.
const products = DataFrame.fromColumns({
  productId: [1, 2, 3],
  name:      ["Widget", "Gadget", "Gizmo"],
  price:     [9.99, 24.99, 14.99],
});

const sales = DataFrame.fromColumns({
  productId: [1, 1, 2, 3, 3],
  qty:       [10, 5, 8, 3, 7],
  region:    ["East", "West", "East", "East", "West"],
});

console.log("Products joined with sales (inner):");
console.log(merge(products, sales, { on: "productId" }).toString());

console.log("\nAll products, even with no sales (left join):");
console.log(merge(products, sales, {
  on: "productId",
  how: "left",
}).toString());
Click ▶ Run to execute
Ctrl+Enter to run