Develop Reference

How to format a list of string into columns of react bootstrap table 2 such that data doesn't flows out of actual columns

I am trying to render some data in tabular form using react-bootstrap-table but the data of one column is overlapping with the data of other columns. i wanted to keep my layout fixed and thus have added the css layout:fixed which is actually a requirement as well. But the final result is:
Actually for this column i'm getting an array of string from backend. e.g. ["DEPT","OLD","CUSTOM_FUNCTION",...] which is getting converted into a single string internally by react and i'm not sure how to further format it.
I also searched in react table docs at : https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-celledit.html#rich-editors but didn't find anything.
My ultimate goal is to visualize the data in a much better way like drop down or each element of array in new line within the same column expandable on some mouse click.
The above image can be considered as sample requirement where only the first element of list will be displayed on load and after clicking on arrow button it will show all the list items below one another in the same column as shown below.
I am not able to figure out which column prop will help me or whether it's even possible or not. The goal is exactly the same but a simple new line separated data will also do.
Column Definition Code:
{
dataField: 'data',
text: 'DATA',
editable: false,
filter: textFilter(),
headerStyle: () =>
{
return { width: '100px', textAlign: 'center'};
}
}
Table Creation Code:
<BootstrapTable
keyField='serialNo'
data={ this.state.data }
columns={ this.state.columns }
filter={ filterFactory() }
pagination={ paginationFactory({sizePerPage: 4}) }
cellEdit={ cellEditFactory({ mode: 'click'}) }
striped
hover
/>
Kindly help or suggest something appropriate.
Thanks

Check this sandbox.
https://codesandbox.io/s/competent-rain-2enlp
const columns = [{
dataField: 'id',
text: 'Product ID',
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'labels',
text: 'Labels',
formatter: (cell) => {
return <>{cell.map(label => <li>{label}</li>)}</>
},
}];
You need to define your own formatter in order to include "complex" html inside your table cell.

Filter not reset when filtering in header for tabulator

I have data with Active & Inactive records which I displays using tabulator ver 4.6 javascript library. My requirement is to show Active data initially on page load.
I created table using below code & added initialHeaderFilter & initialFilter to dispaly an active records which works perfectly. But when I clears filter for column relation_status it does not show all data meaning here it does not show inactive records.
$('#example-table').tabulator({
layout:"fitColumns",
pagination:"local", //paginate the data
paginationSize:5,
initialHeaderFilter: [{field:'Relation_Status', value:'Active'}] ,
initialFilter:[ {field:"Relation_Status", type:"=", value:"Active"}],
columns: [
{ field: "Relation_Type", title: 'Relation Type' , headerFilterParams:{values:true}, headerFilter:"select" , headerFilterParams:paramLookup },
{ field: "Relation_Status", title: 'Relation Status' ,editorParams:{values:{"Active":"Active", "Inactive":"Inactive"}},
editor:"select", headerFilterParams:{values:true}, headerFilter:"select" },
{ field: "Related_clientCompany", title: 'Related Company' },
{ field: "Job_Link", title: 'Action ' },
]
} );
$("#example-table").tabulator("setData", RelatedCompanies);
My table looks as below when it load initially & it shows filter value "Active" in header & displays filtered data correctly but clearing filter (Below in red mark there is cross button X to clear records) does not show All records (including inactive) & it only shows Active records. What setting I am missing here ?

I used below code which solved my issue which I used after setData().
table.setHeaderFilterValue("Relation_Status", "Active");
And I commented below code
//initialHeaderFilter: [{field:'Relation_Status', value:'Active'}] ,
//initialFilter:[ {field:"Relation_Status", type:"=", value:"Active"}],

Kendo grid columns with dynamic data

Need help with Kendo Grid, where in I have dynamic columns on Kendo Grid.
dynamicCols- Object is a object which has list of title and value properties which could be dynamic where it could have any number of objects in the list with title, value pair.
Kendo grid works well if JSON has a flat structure which has all properties at same level and I haven't come across this kind of hierarchial/JSON structure until now.
This grid also needs to support server side sorting and filtering with C# Web API, with Kendo Datasource API for server side sorting and filtering.
Existing kendo column mapping
var cols = [
{ field: 'name', title: 'Name', encoded: false },
{ field: 'id', title: 'Id' },
{ field: 'age', title: 'Age }
]
json = [{
name:'XYZ', id:123, age:45,
dynamicCols: [{title:'Gender',value:'Male'},
{title:'Veteran',value:'Yes'}]
}, {
name:'Jim', id:555, age:24,
dynamicCols: [{title:'Gender',value:'Male'},
{title:'Veteran',value:'No'}]
}, {
name:'Nick', id:557, age:78,
dynamicCols: [{title:'Gender',value:'Female'},
{title:'Veteran',value:'No'}]
}]
**Expected Grid**
Name Id Age Gender Veteran
XYZ 123 45 Male Yes
Jim 555 24 Male No
For Json2
json2 = [
{name:'XYZ', id:123, age:45,
dynamicCols: [{title:'SSN',value:'xx-xx-7891'}]
},
{name:'Jim', id:555, age:24,
dynamicCols: [{title:'SSN',value:'xx-xx-7892'}]
},
{name:'Nick', id:557, age:78,
dynamicCols: [{title:'SSN',value:'xx-xx-7895'}]
}];
**Expected Grid**
Name Id Age Gender SSN
XYZ 123 45 Male xx-xx-7891
Jim 555 24 Male xx-xx-7892

You have two options:
When you are done fetching the data and before creating the new Grid, resolve the JSON object and create flat columns object that the Grid accepts
Your second option is to forget the idea of creating dynamic columns and instead have a template column that dynamically resolves what it needs to display. In such cases you create an external function that you can call from your template. This way you do not end up with complicated and crappy templates. How to invoke external function from a template is covered here.

The easiest solution for me has been to make all columns and then end it by hiding those columns I did not need.
Even hiding around 50 columns did not take any noticable time.
(I had the luxury of knowing all potential columns that could appear)

ng-grid set cellClass according to field value

i'm using the ng-grid now and want the column to be displayed in different color according to different value, i've tried..but not success....
$scope.gridOptions = {
........
columnDefs: [
{ field: "status", displayName: "Status", width:150,cellClass:"status" },
{ field: "",displayName: "Actions",cellClass: "actions",cellTemplate: "<a>xxxx....xxx</a>"}]
};
the status has two value, success or failed, and how can i set the success to green and failed to red, that means set the cellClass dynamic.
Thank you very much!

not sure how to achieve this with cellClass attribute. You could add cellTemplate to your status row add your styles with ngClass and do something like this:
<div ng-class='status ? "success":"failed"'></div>
greetings

ExtJS 4, customize boolean column value of Ext.grid.Panel

Good day, i have a grid with boolean column:
var grid = Ext.create('Ext.grid.Panel', {
...
columns: [{
dataIndex: 'visibleForUser',
text: 'Visible',
editor: {
xtype: 'checkboxfield',
inputValue: 1 // <-- this option has no effect
}
},
...
Grid's store is remote via JSON proxy. When i save or update row, the resulting JSON
look like:
{... visibleForUser: false, ... }
As you see, ExtJS serializes checkbox value as true or false JSON terms.
I need to customize this and serialize to, say, 1 and 0, any suggestion how to accomplish this ? Thank you.

I've just changed my checkboxes system-wide to always act/respond to 0 and 1:
Ext.onReady(function(){
// Set the values of checkboxes to 1 (true) or 0 (false),
// so they work with json and SQL's BOOL field type
Ext.override(Ext.form.field.Checkbox, {
inputValue: '1',
uncheckedValue: '0'
});
});
But you can just add this configs per checkbox.

Ext JS 4.1.1 has a new serialize config on record fields. When a writer is preparing the record data, the serialize method is called to produce the output value instead of just taking the actual field value. So you could do something like this:
fields: [{
name: "visibleForUser",
type: "boolean",
serialize: function(v){
return v ? 1 : 0;
}
/* other fields */
}]
I try to avoid overriding default component behavior whenever possible. As I mentioned, this only works in 4.1.1 (it was introduced in 4.1.0 but I believe it was broken). So if you're using an earlier version, one of the other answers would suit you better.

You can try to override getValue
Ext.define('Ext.form.field.Checkbox', {
override : 'Ext.form.field.Checkbox',
getValue: function () {
return this.checked ? 1 : 0;
}
});