I have base react-bootstrap-table code:
import React from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
const products = [
{
id: "0",
name: "test",
price: "2100"
},
{
id: "1",
name: "test",
price: "2100"
},
{
id: "2",
name: "test",
price: "2120"
}
];
const columns = [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name",
},
{
dataField: "price",
text: "Product Price"
}
];
export default class App extends React.Component {
render() {
return (
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({mode: 'click'})}
/>
)
}
}
My problem is that column changes width, when I click editable cell. I see on live demo that is way to block this effect. live demo
I try avoid this effect by adding css with max width, but it's not problem cell, but whole column:
editorStyle: {
backgroundColor: '#20B2AA',
maxWidth: '30%',
},
You need add .table {table-layout: 'fixed'}.
I was able to resolve this issue by using style props for each column in my table. Specifically, I added the following props:
editorStyle: {width:'100%', overflow:'scroll', padding:'inherit', height:'inherit'},
style: {width:'20%'}
To come up with the width of 20% I had to play around a bit. My table has more than 5 columns, and I found that having my total width across all columns sum to more than 100% gave me good looking columns that didn't expand when editing.
Related
Im using my react type script project for ant design table
i want to know how to do that following image like as table, im search any tutorial but not seen anything, any one know how to do that correctly.
code sand box here
Thanks
image here
code here
class App extends React.Component {
columns: any = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
},
{
title: "Tags",
key: "tags",
dataIndex: "tags"
},
{
title: "Action",
key: "action"
}
];
data: any = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"]
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"]
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"]
}
];
render() {
return <Table columns={this.columns} dataSource={this.data} />;
}
}
You want to create 2 sub rows in each row, but only for some columns. you can use rowspan for this.
you can duplicate your rows (row1-row1-row2-row2-row3-row3-...), and put the subrow values in them (row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...), then use rowspan for the columns you want to expand (like Section and Name in your image), and expand the odd rows and collapse the even rows for this columns.
the full code : (Codesandbox Demo)
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
let multiRowRender = (value, row, index) => {
const obj = {
children: value,
props: {}
};
if (index % 2 === 0) {
obj.props.rowSpan = 2;
}
if (index % 2 === 1) {
obj.props.rowSpan = 0;
}
return obj;
};
const columns = [
{
title: "Number",
dataIndex: "number"
},
{
title: "Issue",
dataIndex: "issue"
},
{
title: "Name",
dataIndex: "name",
render: multiRowRender
},
{
title: "Section",
dataIndex: "section",
render: multiRowRender
}
];
let data = [
{
key: "1",
name: "John Brown",
issues: [32, 100],
numbers: [18889898989, 545054],
section: "sec 1"
},
{
key: "2",
name: "Jim Green",
issues: [42, 50],
numbers: [18889898888, 1420054],
section: "sec 2"
}
];
let data2 = [];
data.forEach(d => {
data2.push({ ...d, issue: d.issues[0], number: d.numbers[0] });
data2.push({
...d,
issue: d.issues[1],
number: d.numbers[1],
key: d.key + "-row2"
});
});
data = data2;
ReactDOM.render(
<Table columns={columns} dataSource={data} bordered />,
document.getElementById("container")
);
Codesandbox Demo
I am loading a react-data-grid with a data source that is populated row by row (a row is added once a second). Once it gets to 9 rows it stops adding rows. I am also having another problem where the grid will not show up until I change the zoom on the screen. It is blank beforehand. Here is my grid element
import React, { Component } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
const columns = [
{ key: 'timeStamp', name: 'Date/Time' },
{ key: 'gpsAccuracyValue', name: 'GPS Accuracy' },
{ key: 'speedMph', name: 'Speed' },
{ key: 'battery', name: 'Battery' },
{ key: 'id', name: 'id' },
];
const rows = [
{ id: 0, title: 'Example' },
{ id: 1, title: 'Demo' }
];
class TestGrid extends Component {
render(){
return (
<div>
<DataGrid
columns={columns}
rows={this.props.data}
rowsCount={this.props.data.length}
minHeight={500}
/>
</div>
);
}
}
export default TestGrid;
I pass in the data like this
<TestGrid data={this.props.deviceData} />
CodeSandbox
Adding style={{ height:500 }} seems to have fixed a similar problem I was having and displays more than 9 rows.
In antd table, while rendering the data can i make a row as disabled.
so i have a dataSource so while rendering the table i need to make a table row as disabled based on the dataSource property.
In the dataSource there is a property of enabled, if its false i need to make the row as disabled kind of css.
first i thought of having a className but is there any inbuilt way, i dont want to have the selected kind of checkbox just plane a row to be disabled.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";
import "./styles.css";
function App() {
const dataSource = [
{
key: "1",
name: "Mike",
age: 32,
address: "10 Downing Street",
enabled: true
},
{
key: "2",
name: "John",
age: 42,
address: "10 Downing Street",
enabled: false
}
];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
return (
<>
<Table dataSource={dataSource} columns={columns} />;
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Codesandbox
is there any way for this
Was able to find the solution
in App.js
<Table dataSource={dataSource} rowClassName={record => !record.enabled && "disabled-row"}
columns={columns} />;
and in css file
.disabled-row {
background-color: #dcdcdc;
}
I'm using react to show a grid with data from my database.
The data is showing properly, but its all text data.
I would like to show an icon at the first column.
This is what I have right now:
<Grid
rows={products}
columns={[
{ name: "icon", title: "Icon" },
{ name: "name", title: "Name" },
{ name: "desc", title: "Desc" },
{ name: "price", title: "Price" },
]
}></grid>
My {products} contains all data.
When I run this the Icon column contains image344.png and not an actual image.
What do I need to do to make the Icon column show an image instead of text?
I also tried to set the icon value to this <img src='image344.png'> but it still shows text.
Please help!
In Grid if give value as text it will show the actual text only. so create the actual html element for the icon column, then it will show the image icon.
Sample data added below to render the image in the Grid view.
var products= [{icon:'image344.png',name:'test',desc:'test',price:'123'}];
products = products.map(function(data){
data.icon = <img src={data.icon}/>;
return data;
});
<Grid
rows={products}
columns={[
{ name: "icon", title: "Icon" },
{ name: "name", title: "Name" },
{ name: "desc", title: "Desc" },
{ name: "price", title: "Price" },
]
}></grid>
Here is the code (live codesandbox):
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Tooltip } from "antd";
const columns = [
{
title: <Tooltip title="Address">A</Tooltip>,
dataIndex: "address",
sorter: (a, b) => a.address.length - b.address.length,
render: cell => <Tooltip title={cell}>{cell[0]}</Tooltip>
}
];
const data = [
{
key: "1",
address: "New York No. 1 Lake Park"
},
{
key: "2",
address: "London No. 1 Lake Park"
},
{
key: "3",
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
address: "London No. 2 Lake Park"
}
];
ReactDOM.render(
<Table columns={columns} dataSource={data} />,
document.getElementById("container")
);
When I hover table header, it shows plain tooltip instead of showing antd Tooltip:
However after disabling sorter the tooltip displays correctly:
How to make Tooltip and sorter work together?
Looks like sorter applies ant-table-column-sorters css class, which causes css to overlap the Tooltip.
A hacky way to fix this could be: apply title as a function, and override css:
const columns = [
{
title: () => <Tooltip title="Address">A</Tooltip>, // note it's func
// apply custom css class, so we can track it
className: "sorter-no-tooltip",
dataIndex: "address",
sorter: (a, b) => a.address.length - b.address.length,
render: cell => <Tooltip title={cell}>{cell[0]}</Tooltip>
}
];
and in index.css:
.sorter-no-tooltip .ant-table-column-sorters:before {
content: none !important;
}
Actually it looks like an framework issue, so it could be submitted.
Antd now supports a property for hiding sorter tooltip.
showSorterTooltip
This option is supported for Table as a whole or at column level.
This issue is fixed, you can update version to 3.12.2. And apply title as a function:
title: () => (your ReactNode),