Ant-Design React Extensions

0.22.0 verified Fri May 01 auth: no javascript

A library of enhanced React components built on top of Ant Design v4, providing additional functionality such as extended tables, forms, and modals. Current stable version is 0.22.0, with occasional updates. It requires React 17+, antd 4.17+, and @ant-design/icons 4.6+. Differentiators include TypeScript support and opinionated wrappers that reduce boilerplate for common enterprise patterns.

Common errors

error Cannot find module 'antd-react-extensions' ↓

cause Package not installed or import path is wrong (using default import instead of named).

fix

Install with 'npm install antd-react-extensions' and use named imports like 'import { ExtendedTable } from 'antd-react-extensions''.

error TypeError: Cannot read properties of undefined (reading 'ExtendedTable') ↓

cause Trying to destructure default import as an object.

fix

Use named import: 'import { ExtendedTable } from 'antd-react-extensions''.

error Warning: React does not recognize the 'visible' prop on a DOM element ↓

cause Using 'visible' on ExtendedModal; it expects 'open'.

fix

Replace 'visible' with 'open' in ExtendedModal.

Warnings

breaking In version 0.20.0, the 'ExtendedTable' component removed the 'onSearch' prop; use 'onFilter' instead. ↓

fix Replace 'onSearch' with 'onFilter' in ExtendedTable usage.

deprecated The 'ExtendedForm' prop 'onSubmit' is deprecated since 0.18.0; use 'onFinish' instead. ↓

fix Change 'onSubmit' to 'onFinish'.

gotcha ExtendedModal does not support Ant Design's 'visible' prop; use 'open' prop instead. ↓

fix Use 'open={true}' instead of 'visible={true}'.

gotcha This package requires React 17 and antd 4.17 or newer; older versions may cause runtime errors. ↓

fix Ensure React and antd meet minimum version requirements.

Install

npm install antd-react-extensions

yarn add antd-react-extensions

pnpm add antd-react-extensions

Imports

ExtendedTable

wrong

const ExtendedTable = require('antd-react-extensions').ExtendedTable

correct

import { ExtendedTable } from 'antd-react-extensions'

ESM-only; named export, no default export.

ExtendedForm

wrong

import ExtendedForm from 'antd-react-extensions'

correct

import { ExtendedForm } from 'antd-react-extensions'

Must use named import; default import is undefined.

ExtendedModal

import { ExtendedModal } from 'antd-react-extensions'

TypeScript types included.

Quickstart

Shows basic usage of ExtendedTable with data and columns, leveraging Ant Design Table under the hood.

import React from 'react';
import { ExtendedTable } from 'antd-react-extensions';
import { Table } from 'antd';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
];
const dataSource = [
  { key: '1', name: 'John Brown', age: 32 },
  { key: '2', name: 'Jane Smith', age: 28 },
];

const App = () => (
  <ExtendedTable
    columns={columns}
    dataSource={dataSource}
    rowKey="key"
    pagination={{ pageSize: 10 }}
  />
);

export default App;