Questions tagged [antd]

This tag should be used for any questions regarding the Ant Design. It is an enterprise-class UI design language and React-based implementation.

Ant Design

An enterprise-class UI design language and React implementation.

✨ Features

  • An enterprise-class UI design system for web applications.
  • A set of high-quality React components out of the box.
  • Written in TypeScript with predictable static types.
  • The whole package of development and design resources and tools.

Environment Support

  • Modern browsers and Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Electron

Install

npm install antd
yarn add antd

Usage

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

And import style manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Or import components on demand.

TypeScript

See Use in TypeScript.

Internationalization

See i18n.

Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Open in Gitpod

Or clone locally:

$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

Contributing

Read our contributing guide and let's build a better antd together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve the codebase, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request principle to create a Pull Request by collaborator template.

5144 questions
49
votes
6 answers

What has happened to Ant Design? Deleted from GitHub

Has Ant Design project been deleted? They were one of the biggest opensource frontend framework for React. their project on github is returning 404: https://github.com/ant-design/ant-design/ their website is broken: https://ant.design/ they are…
Jeggy
  • 1,474
  • 1
  • 19
  • 35
43
votes
1 answer

how to sort a table in alphabetical order with antd

I want to filter the column in alphabetical order here is the code to filter by the size how to do thank you const columns = [{ title: 'First Name', dataIndex: 'first_name', sortDirections: ['descend', 'ascend'], key:…
OAH
  • 1,160
  • 2
  • 11
  • 24
42
votes
7 answers

ant design - huge imports

I'm using ant design library for my react application. And I've faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-design lib). How can I differently import antd components through all my…
WebArtisan
  • 3,996
  • 10
  • 42
  • 62
41
votes
12 answers

How to hide the OK and Cancel buttons of antd Modal?

I wrote a Signup component, which is basically as follows: const Login = ( ) The NormalLoginForm component is from the official website here…
soulmachine
  • 3,917
  • 4
  • 46
  • 56
39
votes
5 answers

action function is required with antd upload control, but I dont need it

I am using ant design components and I have an upload input: https://ant.design/components/upload/ According to the documentation, action is required on the props. However I dont need the file to be posted to an url when uploaded, I need the entire…
Luis Valencia
  • 32,619
  • 93
  • 286
  • 506
38
votes
12 answers

Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key

I am rendering a table with ant design and it works fine, but there is a warning in the console: Each record in table should have a unique key prop,or set rowKey to an unique primary key My code is as follows: import React, { Component } from…
Luis Valencia
  • 32,619
  • 93
  • 286
  • 506
37
votes
6 answers

ESLint: Component definition is missing displayName (react/display-name)

I'm using a react hook component with antd. When setting up columns for a table, the render function is giving me an ESLint error: ESLint: Component definition is missing displayName (react/display-name) I've tried adding displayName to the object…
Leo Farmer
  • 7,730
  • 5
  • 31
  • 47
37
votes
2 answers

How to use antd.Form.create in typescript?

I have a login form created by Form.create(), but I can't pass any props to this form from parent component, compiler always notify a error like error TS2339: Property 'loading' does not exist on type 'IntrinsicAttributes &…
Kennir
  • 541
  • 1
  • 5
  • 12
35
votes
1 answer

Ant-Design Table > How can I disable pagination and show all records

My questions are Ant-Design Table > How can I disable pagination and show all records... Currently, I can configure the pagination component but I don't know how to disable it. Thanks
Timur Catakli
  • 1,306
  • 1
  • 11
  • 12
32
votes
7 answers

How to configure Next.js with Antd / Less and Sass / CSS modules

I want to use Next.js with Sass and CSS modules but also want to use Ant Design and wanted to use the Less styles for smaller building size. I'm able to enable either CSS modules or Less loader but not both at the same time. The examples from…
JustTB
  • 819
  • 1
  • 8
  • 11
32
votes
8 answers

Page refresh break styles on Nextjs production app

I have a website built with Nextjs that break styles on page refresh or when a user visits the website directly to a specific route and not the root route. Eg https://vinnieography.web.app/contacts (The site link if it looks ok, try to refresh and…
ArchNoob
  • 3,946
  • 5
  • 32
  • 59
32
votes
5 answers

How to right-align menu items in Ant Design?

There is an open Git issue requesting props for the alignment of Menu items. In the meantime, what is the correct way to move some Navbar items (eg Login, logout) to the right side? Here is there example code for a Menu, where all Menu items are on…
rampatowl
  • 1,722
  • 1
  • 17
  • 38
32
votes
4 answers

Ant Design. How to set form field error message dynamically?

A form field has many asynchronous check rules, since a composited api can check these rules one time by return different result, i do not want to fire so many api request.
zheng li
  • 501
  • 1
  • 4
  • 10
30
votes
8 answers

How to submit form component in modal dialogue using antd react component library

In my component's render method I have antd Modal component as a parent and antd Form component as a child: render() { const myForm = Form.create()(AddNewItemForm); ... return ( ...
vladimirp
  • 1,474
  • 5
  • 17
  • 24
29
votes
3 answers

Update antd form if initialValue is changed

I'm passing currentUser data from my Redux-saga into antd form, Name, email, phone number, introduction are passed to the form as initialvalue, what i want to do is i want to submit the form as a put request to db if the initialvalue has been…
Jide
  • 301
  • 1
  • 3
  • 5
1
2 3
99 100