ng-tablekit

A cross-platform CLI that adds ready-to-use table pages to Angular 17 and newer workspaces, using the matching NG-ZORRO major version.

Requirements

• Node.js 18.19 or newer
• An Angular 17 or newer workspace
• npm, pnpm, Yarn, or Bun

The CLI runs on Windows, macOS, and Linux. It detects the current Angular workspace, a uniquely nested workspace, or the nearest parent workspace. This means you can run it from the project root, inside the project, or from a folder that contains one Angular project.

TableKit detects the consuming project's Angular major version and installs the same major of ng-zorro-antd and @ant-design/icons-angular. Angular 17, 18, 19, 20, and 21 are covered by the release tests. Existing NG-ZORRO or icon dependencies must match Angular's major version.

Quick start

Add a report page with filter, Excel export, PDF export, global search, sorting, and pagination:

npx --yes ng-tablekit add report-page

Or add a master page with global search, Add/Edit drawers, row actions, role mapping, sorting, and pagination:

npx --yes ng-tablekit add master-page

Then start the Angular application and open /report-page or /master-page.

The CLI automatically:

• copies the selected page and its shared runtime files;
• installs only missing page dependencies;
• configures the NG-ZORRO stylesheet, English locale, and Angular animations;
• registers every icon used by the generated page without requiring global icon configuration;
• adds a lazy route to src/app/app.routes.ts;
• uses relative imports, so no TypeScript path aliases are required;
• preserves existing files and stops before overwriting changed content.

Commands

npx --yes ng-tablekit list
npx --yes ng-tablekit --help
npx --yes ng-tablekit --version

Options for add:

--project <directory>  Angular workspace root (normally auto-detected)
--path <directory>     Custom destination inside the workspace
--route <path>         Custom route path
--skip-route           Do not edit app.routes.ts
--skip-install         Update package.json without installing dependencies
--force                Replace conflicting generated files

Example with a custom destination and route:

npx --yes ng-tablekit add master-page --path src/app/admin/users --route users

Optional project installation

To pin a CLI version for a team, install it as a development dependency:

npm install --save-dev ng-tablekit
npx tablekit add report-page

The tablekit executable is included as a convenient alias when the package is installed locally.

Safe updates

Running the same command again is safe when generated files still match. If any target file has different content, the CLI stops and lists the conflicts. Use --force only when replacing those files is intentional.

Column configuration

Columns opt in to sorting. A sorting icon and sort behavior are included only when sortable: true is present.

columns = [
  { key: 'name', title: 'Name', sortable: true },
  { key: 'department', title: 'Department' },
  { key: 'status', title: 'Status', sortable: false, type: 'status' }
];

Adding, removing, or reordering configured columns does not require table markup changes.

Develop this package

npm install
npm run test:cli
npm run test:package
npm run verify:static
npm run build

Release instructions are in PUBLISHING.md.