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
Related
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 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}
/>,
</>
);
}
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>
I used following ant design sort table code in react type script, its not working correctly anyone know how to do that correctly
My code here
import { Table } from 'antd';
import * as React from 'react';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [
{
text: 'Joe',
value: 'Joe',
},
{
text: 'Jim',
value: 'Jim',
},
{
text: 'Submenu',
value: 'Submenu',
children: [
{
text: 'Green',
value: 'Green',
},
{
text: 'Black',
value: 'Black',
},
],
},
],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value:any, record:any) => record.name.indexOf(value) === 0,
sorter: (a:any, b:any) => a.name.length - b.name.length,
sortDirections: ['descend'],
},
{
title: 'Age',
dataIndex: 'age',
defaultSortOrder: 'descend',
sorter: (a:any, b:any) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
filterMultiple: false,
onFilter: (value:any, record:any) => record.address.indexOf(value) === 0,
sorter: (a:any, b:any) => a.address.length - b.address.length,
sortDirections: ['descend', 'ascend'],
},
];
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: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
function onChange(pagination:any, filters:any, sorter:any, extra:any) {
console.log('params', pagination, filters, sorter, extra);
}
//Table sample data
export class Customertable extends React.Component {
render() {
return (
/* Start Search button*/
<div className="customertable-section">
<div>
<Table columns={columns} dataSource={data} onChange={onChange} />
</div>
</div>
/* End of Search button*/
);
}
}
While declaring the variable in typescript, you need to give it like, columns: any = [] and data: any = []..
And while making table , you should give the props like,
<Table columns={this.columns} dataSource={this.data} />
Working sample antd table with typescript here...
To add on to Maniraj's comment, the documentation provides a section for Typescript specific usage:
https://ant.design/components/table/#Using-in-TypeScript
Setting the type of columns is possible by importing ColumnsType from 'antd/es/table'
Here the solution that may help someone. You should write type for your table config using default ant types and then in compare func, your item is DefaultRecordType, func returns number.
const TABLE_COLUMNS: ColumnsType<DefaultRecordType> = [
{
title: 'ISO #',
dataIndex: 'iso',
key: 'iso',
sorter: (a: DefaultRecordType, b: DefaultRecordType): number =>
a.iso.localeCompare(b.iso),
},]
You can simply sort your ant design table's column by replace your old code with new:
Old Code:
sorter: (a:any, b:any) => a.name.length - b.name.length,
New Code:
sorter: (a:any, b:any) => a.name.localeCompare(b.name),