mctable-react

React wrapper for the mctable package.

mctable home page, docs, usage and demo: https://mormitech.com/mctable/

mctable-react home page: https://mormitech.com/mctable/react

Install

npm install mctable-react

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

Basic usage

Make sure the table container has an explicit size (height/width) so the table can render.

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

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>
	);
}

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

Changelog

v1.0.14
- Upgrade to `mctable` core library `v1.4.6`

v1.0.13
- Upgrade to `mctable` core library `v1.4.5`

v1.0.12
- Upgrade to `mctable` core library `v1.4.4`
- useEffect for column visibility changes

v1.0.11
- Upgrade to `mctable` core library `v1.4.3`

v1.0.10
- Upgrade to `mctable` core library `v1.4.2`

v1.0.9
- CommonJS module format support added

v1.0.8
- Type exports added from  `mctable`

v1.0.7
- Upgrade to `mctable` core library `v1.4.0`
- Change tracking of column validation triggers

v1.0.6
- Aligned with `mctable` core library `v1.3.1`

v1.0.5
- Change detection fixes