Search code examples
javascriptreactjsantdant-design-pro

How to Change Button Text in the EditableProTable in Ant Design Pro

Im creating a Editable ProTable with Ant design pro and i cannot find any solution for change the button text.enter image description here

<EditableProTable
          rowKey="id"
          headerTitle="Add Reciepients"
          maxLength={5}
          recordCreatorProps={{ lang: 'en' }}
          columns={columns}
          request={async () => ({
            data: data,
            total: 3,
            success: true,
          })}
          value={dataSource}
          onChange={setDataSource}
          editable={{
            type: 'multiple',
            editableKeys,
            onSave: async (rowKey, data, row) => {
              console.log(rowKey, data, row);
              await waitTime(2000);
            },
            onChange: setEditableRowKeys,
          }}
        />
Solution

  • To change the button text you need to use props recordCreatorProps and set the value for the creatorButtonText field:

    <EditableProTable
  rowKey="id"
  headerTitle="Add Reciepients"
  maxLength={5}
  recordCreatorProps={{ lang: "en", creatorButtonText: "add row" }}
  columns={columns}
  request={async () => ({
    data: defaultData,
    total: 3,
    success: true
  })}
  value={dataSource}
  onChange={setDataSource}
  editable={{
    type: "multiple",
    editableKeys,
    onSave: async (rowKey, data, row) => {
      console.log(rowKey, data, row);
      await waitTime(2000);
    },
    onChange: setEditableRowKeys
  }}
/>