I am implementing the expandable table row feature on Ant design library for React, and it's displayed perfectly fine but expand button (plus sign) is not generated. I haven't found a solution, I tried to generate / showing expand (plus sign) button. Please help me. Here is the full code below:
import React from 'react';
import { useSelector} from 'react-redux';
import 'antd/dist/antd.css';
import ReactDOM from 'react-dom';
import { Table } from 'antd';
import { Tag} from 'antd';
// import "./index.css";
import {selectRequesting} from "../../../selectors/requesting/RequestingSelector";
import BankAction from "../../../stores/bank/BankAction";
import TableComponent from "../TableComponent";
import {_makeSelectBranchTableData} from "../../../stores/bank/BankSelector";
export default function TableNIDAndProfileVerification (){
const tableData = useSelector(state => _makeSelectBranchTableData(state));
const isRequesting= useSelector(state => selectRequesting(state, [BankAction.REQUEST_ALL_BRANCHES_OF_DISTRICT]));
const details = <h1>Title <span>plus</span></h1>
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{
title: 'Action', dataIndex: '', key: 'x', render: () => <a>Delete</a>,
},
];
const data = [
{
key: 1, name: 'John Brown', age: 32, address: details, description: details,
},
{
key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
},
{
key: 3, name: 'Not Expandable', age: 29, address: 'Jiangsu No. 1 Lake Park', description: 'This not expandable',
},
{
key: 4, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
},
];
return (
<>
<Table
columns={columns}
expandable={{
expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
rowExpandable: record => record.name !== 'Not Expandable',
}}
dataSource={data}
/>,
</>
);
}
Related
i need to add an array from another js file as datasource of table in another js file is this possible.i already have an array and which is mapped , i just need to call it in another js file
contactor.js
import React from "react";
import Wrapper from "./style";
import { Table, Divider, Tag } from 'antd';
import 'antd/dist/antd.css';
const CatagoryMapping = (props) => {
const {data} = props;
const dataSource = [
{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
return(
<Wrapper>
<Table dataSource={dataSource} columns={columns} />;
</Wrapper>
);
}
export default CatagoryMapping;
i want to change the above dataSource array to the array that given below (contractors) ps: already mapped the array ,
subcontractor.js
const Contractors = [
{
id:1,
image:"contractorImage.svg",
numberofcontarcts:'24 contracts',
location:"5 Temple Way,
locationImage:'location.svg',
},
{
id:2,
image:"contractorImage.svg",
numberofcontarcts:'24 contracts',
location:"5 Temple Way,
locationImage:'location.svg',
},
{
id:3,
image:"contractorImage.svg",
numberofcontarcts:'24 contracts',
location:"5 Temple Way,
locationImage:'location.svg',
},
{
id:4,
image:"contractorImage.svg",
numberofcontarcts:'24 contracts',
location:"5 Temple Way,
locationImage:'location.svg',
},
{
id:5,
name:"Zombazu",image:"contractorImage.svg",
numberofcontarcts:'24 contracts',
location:"5 Temple Way,
locationImage:'location.svg',
},
{
id:6,
image:"contractorImage.svg",
numberofcontarcts:'24 contracts',
location:"5 Temple Way
locationImage:'location.svg',
},
]
Just import it as ES module.
So you need to export const in your data source file and import then:
contractors.js
export const Contractors = [...]
contractor.js
import { Contractors } from "./contractors";
...
<Table dataSource={Contractors} />
Note: better to use standard const capitalized kebab_case name: CONTRACTORS
I want to put a checkbox in the header column where the column uses useState. But the checkbox is not working.but checkBox have update is true
import React from 'react';
import 'antd/dist/antd.css';
import { Button, Checkbox, Form, Input,Space,Table } from "antd";
const App = () => {
const [checkBox,setCheckBox]=React.useState(false)
const [columns,setColumns] = React.useState([
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: ()=>{
return (
<>
<Space>
age
<Checkbox onChange={(e)=>setCheckBox(e.target.checked)}
checked={checkBox}
/>
</Space>
</>
)
},
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
}]);
const dataSource = [
{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street',
}];
React.useEffect(()=>{
setColumns(columns.filter((ele)=>ele.dataIndex!=='name'))
},[])
return (
<>
<Table columns={columns} dataSource={dataSource} />
</>
)
}
export default App;
can not checked but in useState in update
enter image description here
you can coppy into this link:enter link description here
To solve this checkbox issue need to use state.
Here is the Sandbox Link with working code.
To implement checkbox at Antd table, you need to add property rowSelection at the table
<Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
First addd selectedRowKeys state to keep the information of selected keys
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
Then create data & column data
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const dataSource = [
{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street',
}
];
Add row selection const as the input of Table's rowSelection property that contain onChange: (keys) => setSelectedRowKeys(keys), that will update the selectedRowKeys state on any checkbox change.
const rowSelection = {
selectedRowKeys,
onChange: (keys) => setSelectedRowKeys(keys),
selections: [
Table.SELECTION_ALL,
Table.SELECTION_INVERT,
Table.SELECTION_NONE,
]
};
And here is the complete code:
import { useCallback, useState, useEffect } from "react";
import { Table } from 'antd';
import './App.css';
export default function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const dataSource = [
{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street',
}
];
// this useEffect is used to watch selection changes and log the values
useEffect(() => {
console.log(selectedRowKeys)
}, [selectedRowKeys])
const rowSelection = {
selectedRowKeys,
onChange: (keys) => setSelectedRowKeys(keys),
selections: [
Table.SELECTION_ALL,
Table.SELECTION_INVERT,
Table.SELECTION_NONE,
]
};
return <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
}
I'm currently learning ReactJs and using Ant Design as a UI library. I have some problems when I tried to use the Selection (Checkbox Table). At first, it's fine with some basic interaction, I can get the selectedRowKeys, the selectedRow data normally to interact with the database. But when I need the Table to check some rows according to the data, it got some problems. When I set the props selectedRowKeys with data, it selects the right checkbox I want but I can't uncheck or select another checkbox. It shows the error:
Uncaught TypeError: clone.push is not a function at arrAdd ...
Here's how I'm doing it:
import React, { useState } from 'react';
import { Table, Radio, Divider } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jack',
age: 20,
address: 'Somewhere else',
},
]; // rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: (record) => ({
name: record.name,
}),
};
const Demo = () => {
const dataKeys = "1,2"; //after handling data from server, I got a string like this which I can pass to Table
return (
<div>
<Table
rowSelection={{
selectedRowKeys: dataKeys,
type: selectionType,
...rowSelection,
}}
columns={columns}
dataSource={data}
/>
</div>
);
};
ReactDOM.render(<Demo />, mountNode);
I try to understand antd.
I have here from the documentation Table Example 3.
When the radio button is clicked, this state is set and the row is selected.
If i clicked a cell of a row, the row should also be selected and the ckeck state of the radio button should be set.
Does anyone have any idea how to do that?
import React from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text: string) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
}
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
},
];
// rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
export default function TableDemo() {
return (
<React.Fragment>
<Table
rowSelection={{
type: 'radio',
...rowSelection,
}}
columns={columns}
dataSource={data}
/>
</React.Fragment>
);
}
Current v4 docs for table are pretty extensive. Buried in there is this.
"Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox.
selection happens when clicking checkbox by default. You can see https://codesandbox.io/s/000vqw38rl if you need row-click selection behavior."
Seems like what you're looking for. Easy to miss, though.
I need a checkbox in all columns of a row in the Ant Design table. i.e in the given sandbox, the table should have 3 checkboxes instead of John Brown, 32 & New York No. 1 Lake Park. Please help me out.
Thank you.
Reference: https://codesandbox.io/s/flamboyant-bogdan-qwhes
Here is working example in sandbox.
You are able to render whatever you want in column cell using render prop of column in Ant. So if you are able to put there function that render checkbox component.
If you want to control checkboxes, you need to set checked and onChange props according checkbox API. Here I used factory pattern to use one function to handle at each checkbox.
Please check the code below:
You are not adding any functionality for selectedRowKeys, rowSelection.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => {text},
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
}];
class App extends React.Component {
state = {
selectedRowKeys: [],
};
selectRow = (record) => {
const selectedRowKeys = [...this.state.selectedRowKeys];
if (selectedRowKeys.indexOf(record.key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
} else {
selectedRowKeys.push(record.key);
}
this.setState({ selectedRowKeys });
}
onSelectedRowKeysChange = (selectedRowKeys) => {
this.setState({ selectedRowKeys });
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectedRowKeysChange,
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
onRow={(record) => ({
onClick: () => {
this.selectRow(record);
},
})}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.4.3/antd.min.js"></script>