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>
Related
How can I change the text "(Add or remove columns)" and icon of (columnsButton or Hiding Columns Button) in a material table?
For example for the code below:
function HideColFrmTbleNotFrmColsBtn() {
return (
<MaterialTable
options={{
// Allow user to hide/show
// columns from Columns Button
columnsButton: true,
}}
data={[
{
name: "Foo",
surname: "Bar",
},
{
name: "Baz",
surname: "Fee",
},
]}
columns={[
{
title: "Name",
field: "name",
// `name` field is hidden in table
// but not in Columns Button
hidden: true,
},
{
title: "Surname",
field: "surname",
},
]}
/>
);
}
https://material-table-core.com/demos/columns/hide/
You can see this code on the document page related to the material-table, and you can also see its details. I want to use columnsButton property to hide the table's columns, but I want to change its text (Add or remove columns) and icon. How can I do this?
Please see this picture I want to change (Add or remove columns):
I am using this Google Timeline Component. I need to use colors based on the one of the column property is there a way to do that? I want all bars with one property to have same color not different.
use this code
export const options = {
title: "Company Performance",
curveType: "function",
legend: { position: "bottom" },
colors:["green"]
};
change the color key to have different colors
You can create arrays to define bar color for each different property.
When you define the data, you can use the role property to define a color of bar.
https://developers.google.com/chart/interactive/docs/roles#stylerole
const data = [ [ { type: "string", id: "Phases" }, { type: "string", id: "Name" }, { type: 'string', role: 'style' }, { type: "date", id: "Start" }, { type: "date", id: "End" } ]];
Finally, you concat the arrays in Chart data.
data={[...data, ...firstArray, ...secondArray]}
This is my first answer in stackoverflow. I hope I helped you.
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.
I am expanding my table rows on click using expandedRowRender, and they both expand from first column. Is there a way to specify from which column the row should expand from? For example, only expand from column 2 onwards?
columns = [
{
title: "Name",
dataIndex: "name",
},
{
title: "Surname",
dataIndex: "surnamen",
},
{
title: "Region",
dataIndex: "region",
},];
<Table
bordered
dataSource={this.dataSource}
columns={this.columns}
expandRowByClick={true}
expandIconAsCell={false}
expandedRowRender={(expaned) => expaned ? <minitable /> : null}
/>
Add children to the specific column:
dataSource={[
{
name: 'Alex',
surnamen: 'Abramov',
region: 'React-Realm',
children: [{ surnamen: 'myData' }]
}
]}
After that, you can control the indentSize prop.
Check out the demo, try filling indentSize={80} in InputNumber.
I am using Angularjs version of Kendo UI Tree List Widget. Below is the code that I am using
HTML
<div id="treeview" kendo-tree-list="treelist"
k-options="TreeViewOptions" style="margin-top: 5px" class="trade_show">
</div>
Code for binding the Tree List
var treeDataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Main Menu", Icon: "", View: "", parentId: null },
{ id: 5, Name: "Sub Menu 1", Icon: "", View: "", parentId: 1 },
{ id: 6, Name: "Sub Menu 2", Icon: "", View: "", parentId: 1 },
{ id: 7, Name: "Sub Menu 3", Icon: "", View: "", parentId: 1 },
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$scope.TreeViewOptions = {
dataSource: treeDataSource,
height: 540,
editable: {
move: true
},
sortable: true,
columns: [
{ field: "Name" },
{ field: "Icon" },
{ field: "View" }
]
};
Every thing is working fine, but I am unable to get column ordering working. Essentially what I need is to be able to drag drop the rows to set their display order.
This feature exists in Kendo UI TreeView widget.
Is this feature supported in the Kendo UI Tree List Widget?
If not, then is there a workaround to get it working?