Questions tagged [ant-design-pro]

482 questions
4
votes
2 answers

How to implement responsive layout in Ant Design form?

While working with ant design form, I have serious problem with responsiveness. import { From, Input, Button } from 'antd' const { Item } = Form; const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, }; const tailLayout = { …
Josh Thomas
  • 1,607
  • 2
  • 8
  • 22
4
votes
4 answers

How to get index of row in ant design table?

I want to show index of rows in ant design table. eg: 1 to 10 for 10 rows data i got. const columns = [{ title: 'ID', dataIndex: 'id', key: 'id', width: '5%' }, ... ];
thaovd1712
  • 120
  • 1
  • 1
  • 9
4
votes
2 answers

Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?

I am using antd design with Reactjs. Found this warning but could not trace the issue. Following code: {getFieldDecorator('order_receiver', { defaultChecked: true, rules: [ { required: false, …
Majedur
  • 3,074
  • 1
  • 30
  • 43
4
votes
1 answer

How to config Ant Design in Next.js with custom theme & support CSS Module feature

I'm building a ReactJs project base on SSR ( using Next.js ) with Ant Design. But after I customize next.config.js config for support Ant Design, I can't use CSS Module feature. Next.js supports CSS Modules using the [name].module.css file…
Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
4
votes
1 answer

Recreate Ant Design Pro like Sider/Drawer in Antd React App

I'm trying to configure the style/css of my Antd React app to be mobile ready. My main menu uses the Reactive Sider Menu seen here. My issue is when I'm viewing with a mobile viewport it's kinda ugly and it squashes everything outside of the menu.…
adamkost
  • 143
  • 2
  • 10
4
votes
1 answer

Antd: How to change Antd Form.Item label text color?

I am using antd npm package for Next.js project. I am struggling with changing label text color for Form.Item component. I am trying below but its not changing label color.
newdeveloper
  • 1,401
  • 3
  • 17
  • 43
4
votes
3 answers

Can I hide remove icon only for some files in antd Upload component

I want to hide remove button in Antd Upload component only for files that meet certain criteria. I know remove icon can be disabled for every file using showRemoveIcon prop. But how can I do this for an individual file in the fileList
Johnson Cherian
  • 545
  • 1
  • 7
  • 21
4
votes
2 answers

Filter antd Table With datePicker in react

Following is the code for Ant design table with filtering the object using the input field but i want it to transform it for antd datepicker field instead of input field but not getting how to tranform it. const data = [ { key: '1', …
ahmed tahir
  • 49
  • 1
  • 6
4
votes
2 answers

Antd table column width issue

I use antd table in my project and often use a horizontal scroll when there are many columns in a table that cannot be displayed in a single frame. The width for each column is defined. It was working fine in previous days but now i am having a…
Muhammad Awais
  • 41
  • 1
  • 1
  • 3
4
votes
3 answers

Is there a way I can close Modal without using the default Buttons on ANTD?

So I am new to ReactJS and I'm using ANT Design and currently playing around with their Modal. I want to know if we can close the Modal without using the OK and Cancel buttons. So I removed these buttons. And created a Button inside the config. I…
4
votes
1 answer

Translate Ant Design Pro Table default table's default operation

Is there any way to translate Ant Design Pro table's default operation text to English. I am using Umi default components
4
votes
4 answers

Get result as Array in Antd Form

I want my form to submit price data as an array format, currently, my form has a map, look like {data.Type &&
{data.Type.map((datamapped)=>

{datamapped.TypeName}

Harry Edward
  • 141
  • 2
  • 2
  • 14
4
votes
1 answer

Ant Design Form Custom Validator

In ant design one can provide a custom validator like the following: {getFieldDecorator("firstName", { rules: [ { validator: (rule: any, value: string, cb: (msg?: string) => void) => { …
pouya
  • 3,400
  • 6
  • 38
  • 53
4
votes
1 answer

How to Know When All Fields are Validated (Values Added) in Ant-Design Form?

I have a simple Form that checks for user's input values such as name, email and address and validates them. So far I have successfully achive this. But I have a submit button as the last Form.Item which I want to only enable when all input fields…
Waleed93
  • 1,130
  • 2
  • 15
  • 24
4
votes
3 answers

Ant Design : getFieldDecorator()

import { Form, Input, Tooltip, Icon } from 'antd'; import React , {Component }from 'react'; import ReactDOM from 'react-dom'; export default class RegistrationForm extends Component { state = { confirmDirty: false, …
Rahul Syal
  • 545
  • 2
  • 6
  • 21