mctable-react

Install

Add the package

npm install mctable-react

react and react-dom are peer dependencies in your app.

Styles

Import the LESS

Include the default table styles once in your app (for example in your entry file).

import "mctable-react/McTable.less";

Layout

Give the container a size

Make sure the table container has an explicit height/width so the canvas can render correctly.

<div style={{ height: 400 }}>
  <McTable />
</div>

Basic usage

Render a table

import * as React from "react";
import { McTable } from "mctable-react";
import "mctable-react/McTable.less";

const columns = [
  { name: "id", title: "ID", type: "number" },
  { name: "name", title: "Name", type: "text" },
  { name: "active", title: "Active", type: "boolean" },
  { name: "created", title: "Created", type: "date" },
];

const records = [
  { id: 1, name: "Ada", active: true, created: "2026-02-24" },
  { id: 2, name: "Linus", active: false, created: "2026-02-23" },
];

const settings = {
  formatting: { displayDateFormat: "yyyy-MM-dd" },
  paging: { pageSize: 25 },
  scroll: { transition: "smooth" },
};

export function UsersTable() {
  return (
    <div style={{ height: 400 }}>
      <McTable columns={columns} records={records} settings={settings} />
    </div>
  );
}

Advanced

Access the underlying instance

You can pass settings, license, or onReady if you need deeper access to the underlying mcTable instance.

<McTable
  columns={columns}
  records={records}
  settings={settings}
  license={{ owner: "__YourCompany", key: "__YourLicenseKey" }}
  onReady={(mcTable) => {
    // call mcTable API here
  }}
/>

Links

Related resources

mcTable docs

Usage patterns

Licensing

Main site