I'm using Antd table and I'm using scroll: {y:...} to have the table contents scrollable. I'd like to have the table auto-size to fit the parent and be responsive to re-sizes. ('auto' sizes the control to fit all its contents, which is not what I need.) Currently I'm just hacking a constant height that works when the app is maximized on my primary monitor. I've tried several CSS overrides, but I can't seem to get this to work as desired.
import { Table } from 'antd';
const columns = [
{
title: 'Name (all screens)',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age (medium screen or bigger)',
dataIndex: 'age',
key: 'age',
responsive: ['md'],
},
{
title: 'Address (large screen or bigger)',
dataIndex: 'address',
key: 'address',
responsive: ['lg'],
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
You can take inspiration from the above example
Related
I want to give the user an option to hide or show columns of Antd table via a group of checkboxes.
I tried different online solutions but I didn't succeed. I want something like this, as in the below picture.
note: some columns has been checked by default, but user can also uncheck them
I am stuck with this problem from last 2 days.
Here is my code.Thanks in advance!
https://stackblitz.com/edit/react-h8hoys-q2mfxy?file=demo.js
I changed your code in 3 point:
I used setState instead of regular variables (like const)
I initialized state by baseColumns filtering for hide cars column (because it was checked at by default).
I changed onChange function for filter baseColumns and pass it to setColumn:
const baseColumns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Cars',
dataIndex: 'cars',
key: 'cars',
},
{
title: 'Bikes',
dataIndex: 'bikes',
key: 'bikes',
},
{
title: 'Plane',
dataIndex: 'plane',
key: 'plane',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
let [columns, setColumns] = useState(
baseColumns.filter((item) => item.dataIndex !== 'cars')
);
let onChange = (checkedValues) => {
console.log(checkedValues);
setColumns(
baseColumns.filter((item) => !checkedValues.includes(item.dataIndex))
);
};
to see complete code see this link
You can create a state to store the keys of columns so we can filter out the columns. I make Checkbox.Group as controlled component. When you change any checkbox value, in onChange function you will get an array of checkbox keys that are currently selected.
Hope this solve your problem.
import { useState } from 'react';
import { Checkbox, Table } from 'antd';
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Cars', dataIndex: 'cars', key: 'cars' },
{ title: 'Bikes', dataIndex: 'bkes', key: 'bikes' },
{ title: 'Plane', dataIndex: 'plane', key: 'plane' },
{ 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' }
];
const columnsKeys = columns.map((column) => column.key);
const App = () => {
const [selectedColumns, setSelectedColumns] = useState(columnsKeys);
const filteredColumns = columns.filter((column) => selectedColumns.includes(column.key));
const onChange = (checkedValues) => {
setSelectedColumns(checkedValues);
};
return (
<>
<Checkbox.Group onChange={onChange} value={selectedColumns}>
{columnsKeys.map((column) => (
<Checkbox value={column} key={column}>
{column}
</Checkbox>
))}
</Checkbox.Group>
<Table dataSource={dataSource} columns={filteredColumns} />;
</>
);
};
export default App;
This is my code I have react table with mock data now What I want now is to select the row data which I have mock columns data that means when I click on any table data it should go to another page and display the data on a page how can I do that I am not getting any clue can anyone help in this
function ViewAudits(){
const data = [{
audit_name: 'Sha',
address: 'road',
assignee: 'rav',
start_date: '11/06/2021',
created_date: "11/06/2021",
created_by: "sjr",
contact_person: "ytr",
phone: "9875636578"
},
]
const columns = [{
Header: 'Audit Name',
accessor: 'audit_name'
},{
Header: 'Address',
accessor: 'address'
},{
Header: 'Assignee',
accessor: 'assignee'
},{
Header: 'Start Date',
accessor: 'start_date'
},{
Header: 'Created Date',
accessor: 'created_date'
},{
Header: 'Created By',
accessor: 'created_by'
},{
Header: 'Contact Person',
accessor: 'contact_person'
},{
Header: 'Phone',
accessor: 'phone'
}]
// const getTrprops = (row) => {console.log("log ",row)}
return (
<>
<Navbar/>
<div className="container md-5 mt-3">
<ReactTable
data={data}
columns={columns}
defaultPageSize = {2}
// getTrProps={(data, column) => {
// return {
// onClick: (e, t) => { console.log("clickd",e,t) },
// }
// }}
defaultSorted={[
{
id: "audit_name",
desc: true
}
]}
pageSizeOptions = {[2,4,6]}
/>
</div>
I saw few solutions on this didn't work
I ma newbie to lightning component and I am using the lightning tree grid view in that I like to add some button on one column in child rows. I searched for that option but I couldn't find it.
Please help me out how we can achieve this.
Lightning Component
<div class="slds-m-around_xx-large">
<lightning:treeGrid aura:id="accTree"
columns="{!v.gridColumns}"
data="{!v.gridData}"
keyField="name"
expandedRows="{!v.gridExpandedRows}"/>
</div>
Lightning Controller
var columns = [
{
type: 'text',
fieldName: 'Order',
label: 'Order'
},
{
type: 'currency',
fieldName: 'Total',
label: 'Total'
},
**{
type: 'Button',
fieldName: 'EstimatedDeliveryDate',
label: 'Estimated Delivery Date'
},**
]
I tried adding the button as type "button: but it doesn't work.
Only first column can't be made as button . Otherwise we have an type called button and we can pass the typeattributes to align the button other than the first column
type: 'button',
fieldName: 'Sample',
label: 'Test',
typeAttributes: {
iconName: '',
name: 'sample',
title: 'testtet',
label:'testtet',
alternativeText:'Example',
variant: 'brand',
disabled: false
}
I am using React-data-grid with Filter options in the table. For some column cells, i am passing a DOM object (not as a string). And for this column, the filter functionality is not working.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
}];
And here are the Rows...
let rows = [];
_.each(response, function(value, index){
rows.push({
date: value.date
price: <div>{value.currencySymbol} <span>{value.price}</span></div>
})
});
So, this is my Column Metadata , and Rows. I am passing this metadata to ReactDataGrid Component.
Now the date filter is working fine. However this price filter is not working well due to this inline DOM element.
Can Someone please help me to get this solved?
Resolved this by using 'formatter' or else we could use 'getRowMetaData'
formatter: an adaptor/middleware for rendering the value in DOM
getRowMetaData: it is used to get the adjacent cell values of the row. And, We could achieve using props.dependentValues where it will have all the column data of the row. I used this in 'Shipment Price' column, to get the other column values of that row.
this._columns = [
{
key: 'date',
name: 'Shipment date',
width: 220,
sortable: true,
filterable: true,
formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
},{
key: 'price',
name: 'Shipment Price',
width: 220,
sortable: true,
filterable: true,
formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
getRowMetaData: (row) => (row)
}];
I am trying to bind a grid data to a form in extjs. when i click on a grid row, the details should be populated in form. Can i do that in a simple way without using MVC. I have wrote the below code. help me further. Thank you
// JavaScript Document
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'id','name', 'email', 'phone' ]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: '1', name: 'srb', email: 'srb#gmail.com', phone: '555-111-1224' },
{ id: '2', name: 'srv', email: 'srv#gmail.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
title: 'All Users',
columns: [
{
text: 'Id',
dataIndex: 'id' ,
flex: 1
},
{
text: 'Name',
dataIndex: 'name',
flex: 2
},
{
text: 'Email Address',
flex: 3,
dataIndex: 'email',
},
{
text: 'Phone Number',
flex: 2,
dataIndex: 'phone'
}
],
listeners : {
itemclick: function(dv, record, item, index, e) {
var nm= record.get('name');
}
},
});
Ext.create('Ext.form.FieldSet',{
renderTo: Ext.getBody(),
margin: '0 0 0 10',
title:'User details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id'
},{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email Id',
name: 'email'
},{
fieldLabel: 'Phone Number',
name: 'phone'
}]
});
});
Use Ext.form.Panel instead of Ext.form.FieldSet. Field set is more of a decorating container. The form panel provides support for loading / saving data from the form, etc.
Then you need a way to access your form panel in your click event. The absolute simplest is to set an id on the form, and use Ext.getCmp to get a ref to the form. Since you've already got the record there, you can just use the loadRecord method of the form panel.
And you'll be done! Be happy to have named your model & form fields the same ;)
The final call in the event listener will look like this:
Ext.getCmp('myForm').loadRecord(record);
what version of extjs are you using?
you don't seem to have a form defined or instantiated.
in your grid's itemclick event handler, you need to get a reference to the form, and call form.loadRecord with the passed in record (2nd argument):
itemclick: function(dv, record, item, index, e) {
var form = getAReferenceToTheFormObject();
form.loadRecord(record);
}
example:
http://jsfiddle.net/4TSDu/74/