Related
I am trying to change the background color of the cell based on its value inside. I am currently using this library: react-data-table-component
Logic:
If value is greater than 0, then the background color of the cell will be red.
Otherwise there won't be a background color.
Here's my current snippet code for the Data Table:
const CountryTable = ({items}) => {
return(
<DataTable
title="Covid-19 Stats"
defaultSortAsc="false"
responsive
defaultSortField="cases"
defaultSortAsc={false}
striped
highlightOnHover
data={items}
columns={
[
{
name: '#',
selector: (row, index) => index+1,
disableSortBy: true,
},
{
name: 'Country',
selector: 'country',
sortable: true,
},
{
name: 'Total Cases',
selector: 'cases',
sortable: true,
},
{
getProps: (state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
style: {
background:
parseInt(rowInfo.row.todayCases) > 0 ? "red" : null
}
};
} else {
return {};
}
},
name: 'Additional New Cases',
selector: 'todayCases',
sortable: true,
},
{
name: 'Current Active Cases',
selector: 'active',
sortable: true,
},
{
name: 'Total Deaths',
selector: 'deaths',
sortable: true,
},
{
name: 'Additional New Deaths',
selector: 'todayDeaths',
sortable: true,
},
{
name: 'Total Recoveries',
selector: 'recovered',
sortable: true,
},
{
name: 'Additional New Recoveries',
selector: 'todayRecovered',
sortable: true,
},
]
}
/>
);
}
And here's the illustration of what it should be look like:
The docs say you can set conditional styles like this: https://www.npmjs.com/package/react-data-table-component#conditional-style-object
const conditionalRowStyles = [
{
when: row => row.calories < 300,
style: {
backgroundColor: 'green',
color: 'white',
'&:hover': {
cursor: 'pointer',
},
},
},
// You can also pass a callback to style for additional customization
{
when: row => row.calories < 300,
style: row => ({
backgroundColor: row.isSpecia ? 'pink' : 'inerit',
}),
},
];
const MyTable = () => (
<DataTable
title="Desserts"
columns={columns}
data={data}
conditionalRowStyles={conditionalRowStyles}
/>
);
I quickly put together an example usings cell and styled components:
https://codesandbox.io/s/upbeat-galileo-r7p34?file=/src/App.js
import "./styles.css";
import DataTable from "react-data-table-component";
import styled from "styled-components";
const StyledCell = styled.div`
&.low {
background: green !important;
}
&.medium {
background: orange;
}
&.high {
background: red !important;
}
`;
export default function App() {
let items = [
{
Country: "Canada",
AdditionalNewCases: 500
},
{
Country: "England",
AdditionalNewCases: 5000
},
{
Country: "USA",
AdditionalNewCases: 500000
}
];
function getCssClass(value) {
if (value > 5000) return "high";
else if (value > 500) return "medium";
return "low";
}
return (
<DataTable
title="Covid-19 Stats"
defaultSortAsc="false"
responsive
defaultSortAsc={false}
striped
highlightOnHover
data={items}
columns={[
{
name: "number",
selector: (row, index) => index + 1,
disableSortBy: true
},
{
name: "Country",
selector: "Country",
sortable: true
},
{
name: "New Cases",
selector: "AdditionalNewCases",
sortable: true,
cell: (row) => (
<StyledCell className={getCssClass(row.AdditionalNewCases)}>
{row.AdditionalNewCases}
</StyledCell>
)
}
]}
/>
);
}
I can't display custom icons on the actions tab from ng2-smart-table. I have installed Eva Icons from Akevo Team and I want to use them. I have changed the edit button to show some custom icons but the problem is that nothing appears. On the left side of delete, a brush icon had to appear.
Here is an image with the problem:
Here is the code:
settings = {
edit: {
editButtonContent: '<nb-icon icon="brush"></nb-icon>',
saveButtonContent: '<nb-icon icon="checkmark"></nb-icon>',
cancelButtonContent: '<nb-icon icon="close-circle"></nb-icon>'
},
columns: {
device: {
title: 'Device',
sortDirection: 'asc'
},
type: {
title: 'Type',
sort: false,
filter: false
},
serialNumber: {
title: 'Serial Number'
},
status: {
title: 'Status'
}
}
};
Try this :
settings = {
hideSubHeader: true,
actions: {
custom: [
{
name: 'edit',
title: '<nb-icon icon="brush"></nb-icon>'
},
{
name: 'save',
title: '<nb-icon icon="checkmark"></nb-icon>'
},
{
name: 'cancel',
title: '<nb-icon icon="close-circle"></nb-icon>'
}
],
add: false,
edit: false,
delete: false
}
...
};
hope this works for you!
Also you can use other icons sets like material icons, just add it to your project and then change your settings like:
settings = {
edit: {
editButtonContent: '<span class="material-icons">mode_edit</span>',
saveButtonContent: '<span class="material-icons">check_circle</span>',
cancelButtonContent: '<span class="material-icons">cancel</span>'
},
/* ... */
}
settings = {
hideSubHeader: true,
sort: true,
actions: {
position: 'left',
add: false,
edit: false,
delete: false,
select: false,
custom: [
{
name: 'viewRecord',
type: 'html',
title: '<i class="far fa-file-alt" title="View Record"></i>',
},
{
name: 'editRecord',
type: 'html',
title: '<i class="far fa-edit" title="Edit Record"></i>',
},
],
},
columns: {
column1: {
title: 'Column 1',
type: 'string',
width: '35%',
},
column2: {
title: 'Column 2',
type: 'string',
},
column3: {
title: 'Column 3',
type: 'string',
},
},
};
I found this thread:
https://github.com/akveo/ng2-smart-table/issues/1034
And so as mentioned in the last comment:
temporarily use the old nebular-icons
https://github.com/akveo/nebular-icons/tree/master/src/icons
I downloaded the required icon's SVG and added them as:
settings = {
edit: {
editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
. . .
}
. . .
}
Works well enough.
let newSettings = {
mode: "external",
actions: {
add: false,
edit: false,
delete: false,
position: 'right'
},
hideSubHeader: true,
add: {
addButtonContent: '<i class="nb-plus"></i>',
},
edit: {
editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
},
delete: {
deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
confirmDelete: true,
},
}
I'm facing an issue. I'm building an EXTJ 6.2 modern app with Sencha architect 4.1. I'm using the grid component in my panel with a server loaded store. I'd like to color rows according to the data I have.
In classic, this is doable with
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, p, store) {
//some if statement here
}
I tried this in modern but it doesn't work. Does anyone know of another way or a hack that I could do color the rows? Or at best at least change the one-color background.
I'd really like to avoid using the list component if possible.
In modern you can use itemConfig to configure Ext.grid.Row.
Add the code bellow to a Sencha Fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
itemConfig: {
listeners: {
painted: function (row) {
var record = row.getRecord();
var color = record.get('color');
row.setStyle('background: '+color)
//if (color == 'red')
//row.setStyle('background: red');
}
}
},
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120
},
{
text: 'Color',
dataIndex: 'color',
flex: 1
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
the itemConfig part is what will do the trick.
After #Gwynge's comment i've created another example setting the color to each cell using the renderer config:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
},
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Color',
dataIndex: 'color',
flex: 1,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
I hope this will help.
To color a row, the following code couldn't work in my project
itemConfig: {
listeners: {
painted: function(row) {
var record = row.getRecord();
}
}
}
row.getRecord doesn't work (getRecord() is not recognized as function)
I succeed to color a row from a cell
columns: [{
text: 'Name',
dataIndex: 'name',
width: 150,
sortable: true,
renderer: function(v, record, dataIndex, cell) {
var row = cell.up();
row.setStyle('background: ' + record.get('color') + ';');
return v;
}
}]
I found that neither of the solutions suggested in the accepted answer worked well for me. The solution using a painted event handler only works on first load. If the data is updated then the styling doesn't change so the rows are still coloured as per the original data. The renderer solution is unwieldy if you have a large number of columns or want to have multiple renderers.
For anyone else in the same boat, here's my solution:
itemConfig: {
viewModel: true,
bind: {
cls: '{record.IsEnabled === false ? "disabled" : ""}'
}
}
I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();
Could you help me to align to the right the entries in ExtJS combo listbox?
The config 'style' doesn't work with text-align or I'm doing something wrong?
See sample coding or the fiddle example here
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'right',
labelWidth: 150
},
renderTo: Ext.getBody(),
standardSubmit: true,
title: 'Form',
width: 400,
items: [{
displayField: 'val1',
fieldLabel: 'Combo',
name: 'field01',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['key1', 'val1'],
style: 'text-align: right', // doesn't work
data: [
{"key1":"AL", "val1":"Alabama..."},
{"key1":"AK", "val1":"Alaska"},
{"key1":"AZ", "val1":"Arizona"}
]
}),
valueField: 'key1',
xtype: 'combo'
}]
});
}
});
try with this .. it is working fine at my end.
CSS
.alignRight .x-boundlist-item{
text-align: right;
}
add the above css class to our combo using listConfig .You can see the same in the code.
displayField: 'val1',
fieldLabel: 'Combo',
name: 'field01',
queryMode: 'local',
listConfig:{
cls:'alignRight',
},
store: Ext.create('Ext.data.Store', {
fields: ['key1', 'val1'],
data: [
{"key1":"AL", "val1":"Alabama..."},
{"key1":"AK", "val1":"Alaska"},
{"key1":"AZ", "val1":"Arizona"}
]
}),
valueField: 'key1',
xtype: 'combo'
Directly select the class of the combobox list in css and apply the style it should override any ExtJS style.
This will work:
.x-combo-list-item {
text-align: right;
}