We Keep Coding

Align column content to the right of cell React MUIDataTable

I'm new to MUI and i want to align the content of a column to the right.my code looks like this:
<MUIDataTable
title={""}
data={data || []}
columns={realColumns ? realColumns(data, modeMO) : columns(data, modeMO)}
options={{
filterType: "textField",
responsive: "simple",
selectableRows: selectable, // set checkbox for each row
search: false, // set search option
filter: false, // set data filter option
download: false, // set download option
print: false, // set print option
pagination: true, //set pagination option
viewColumns: false, // set column option
elevation: 0,
rowsPerPageOptions: [10, 20, 40, 80, 100],
//setCellProps: () => ({ align: 'right' }) ,
onRowSelectionChange: (
currentRowsSelected,
allRowsSelected,
rowsSelected
) => {
setSelectedRows(
allRowsSelected.map((el) => {
return data[el.dataIndex];
})
);
},
selectToolbarPlacement: "none"
}}
/>;
and this is what's displayed:
table Picture
so i would like to align all the numbers in "Montant à régler" column to the right.
can somebody help please.

Disclaimer: This is totally un-tested and only a snip of "columns".
Give your columns a custom render and set the cell properties i.e. something like:
export const columns = [
{
name: "category",
label: "Fun Guy Category",
options: {
setCellProps: () => ({ style: { minWidth: "100px", maxWidth: "800px", justifyContent: 'end' }}),
customBodyRender: (data, type, row) => {return <pre>{data}</pre>}
},
},

If you are using basic tables of Material UI then you can align it through passing align prop to the TableCells to align content in each row and column. You can set align equals to right, left, etc.
If you are using DataGrid or data tables of Material UI (Which I think you are) then you can pass align prop to each column. See the edited example code below from Material UI:
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
const columns = [
{ field: "id", align: "rights", headerName: "ID", width: 70 },
{ field: "firstName", align: "center", headerName: "First name",
width: 130 },
{ field: "lastName", align: "left", headerName: "Last name",
width: 130 },
{
field: "age",
headerName: "Age",
type: "number",
width: 90
},
{
field: "fullName",
headerName: "Full name",
description: "This column has a value getter and is not
sortable.",
sortable: false,
width: 160,
valueGetter: (params) =>
`${params.getValue(params.id, "firstName") || ""} ${
params.getValue(params.id, "lastName") || ""
}`
}
];
const rows = [
{ id: 1, align: "right", lastName: "Snow", firstName: "Jon", age:
35 },
{ id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
{ id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
{ id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
{ id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null
},
{ id: 6, lastName: "Melisandre", firstName: null, age: 150 },
{ id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
{ id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
{ id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }
];
export default function DataTable() {
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
/>
</div>
);
}
You can learn many more about Material UI Tables here:
Material UI Tables
Hope this helps.

how can i print a boolean value in JSON in table

I want to print a boolean value from JSON into a table, if I access directly to the status field, an empty value is displayed
here is an example of json file:
{
'name':'client'
'status':true,
'method':'masterCard',
'amount':'1700',
}
jsx file :
const columns = [
{
title: "name",
dataIndex: "name",
key: "name",
width: "20%"
},
{
title: "status",
dataIndex: "status",
key: "status",
width: "20%"
},
{title: "Method Paiment",
dataIndex: "method",
key: "method",
width: "20%",
}]

The solution i found is to do a condition (is true or false ):
const columns = [
{
title: "name",
dataIndex: "name",
key: "name",
width: "20%"
},
{
title: "status",
dataIndex: "status",
key: "status",
width: "20%",
render: statut => {
if (statut == true) {
return (
<Tag color="#1890ff" key={statut}>
Is True
</Tag>
);
}
return (
<Tag color="#d48806" key={statut}>
Is False
</Tag>
);
}
},
{title: "Method Paiment",
dataIndex: "method",
key: "method",
width: "20%",
}]

Kendo ui grid Fiter mode:row

I'm using filter column mode:row in my grid. For my numeric column the menu is showned as below
What i need is a filter in this column as the filter that is used in menu mode
Here is a part of my code
schema: {
data: "results",
total: "total",
model: {
id: "accountingTransactionKey",
fields: {
accountingTransactionKey: { editable: false, nullable: false },
date: { editable: false, nullable: false },
organization: { editable: false, nullable: false },
accountDebit: { editable: false, nullable: true },
costArticleUsed: { editable: false, nullable: true },
accountCredit: { editable: false, nullable: true },
isIntraGroupPartnerOrganization: { editable: false, nullable: true, type: "number" },
currency: { editable: false, nullable: true },
sum: { editable: false, nullable: true, type: "number"},...
...{
field: "sum",
title: "Сумма",
width: "150px",
//format: "{0:n2}",
locked: true,
filterable:
{
multi: true,
cell:
{
operator: "eq",
suggestionOperator: "eq",
showOperators: true
}
},
template: function (dataItem) { return numberWithSpaces(dataItem.sum.toFixed(2)) },
footerTemplate: "<b>" +"#: numberWithSpaces(sum.toFixed(2)) #"+"</b>"
},
There is a soltion for my request?
Thank you

I have tried the following script and it gives me a range filter by using the property extra.
<script>
$(document).ready(function() {
var griddata = createRandomData(50);
$("#grid").kendoGrid({
dataSource: {
data: griddata,
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: false,
},
{
field: "Title",
filterable: false,
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: false,
},
{
field: "Age",
width: 100,
filterable:
{
extra: true
}
}
]
});
});
</script>
If you want to create a customized range filter.
columns: [
{
field: "Age",
filterable: {
cell: { template: betweenAgeFilter }
}
}
]
function betweenAgeFilter(args) {
var filterCell = args.element.parents(".k-filtercell");
filterCell.empty();
filterCell.html('<span style="justify-content:center;"> <span>From:</span><input id="startAge"/><span>To:</span><input id="endAge"/></span>');
$("#startAge").kendoNumericTextBox({
change: function (e) {
var startAge = e.sender.value();
var endAge = $("#endAge").data("kendoNumericTextBox").value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
$("#endAge").kendoNumericTextBox({
change: function (e) {
var startAge = $("#startAge").data("kendoNumericTextBox").value();
var endAge = e.sender.value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
}

Kendo UI Gantt chart task lable change

I am trying to change Kendo UI Gantt title. i found one demo code, but it was not working
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}],
messages: {
views: {
editor: {
editorTitle:"Edit Task"
}
}
}
});
</script>
Is it possible to change the label on Gantt bars ?
I want some info on left side tree and other info on bars is it possible ?
parent child relation is not retaining if i add gantt columns other than title.
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
descr : { from : "DESCR", type: "string"},
orderId: { from: "ORDERID", type: "number", validation: { required: true } },
parentId: { from: "PARENTID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "START", type: "date" },
end: { from: "END", type: "date" },
Title: { from: "TITLE", defaultValue: "", type: "string" },
percentComplete: { from: "PERCENTCOMPLETE", type: "number" },
summary: { from: "SUMMARY", type: "boolean" },
expanded: { from: "EXPANDED", type: "boolean", defaultValue: true }
}
}
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "descr", title: "Descr", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
var gantt1 = $("#gantt1").kendoGantt({
dataSource: tasksDataSource1,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "title", title: " ", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");

Try starting uppercase:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00")
}],
EDIT:
Answering to your comment:
Define columns definition:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00"),
Description: "Some longer description"
}],
columns: [
{ field: "ID", title: "ID", width: 60 },
{ field: "Title", title: "Title", editable: true, sortable: true },
{ field: "Description", title: "Description", width: 100, editable: true, sortable: true }
],

Kendo Grid filter to use combo box with column.values rather than drop down list

I'm trying to get Kendo's Grid to show a filter using a combo box rather than a drop down list when used with values. What I mean is, on the grid columns array, each column can be given a list of values (objects with text and value properties) for each possible entry in the database, thereby rather than showing a code, it shows a recognisable name or text instead of the code. The problem is that whenever I specify values against the column, the filter reverts to a fixed list of criteria and a drop-down list, which I don't want.
See an example of what I mean here. What I'd like to see is the filter (on the Category column) to show a combo-box rather than a drop down list, but still use the values against the codes in the table to show in the data in the grid, but it doesn't seem to work.

As you say it doesn't work with the values property, so one approach would be to set up a custom row template and use a lookup function on category ID and replace it with the corresponding text:
var categories = [{
"value": 1,
"text": "Beverages"
}, {
"value": 2,
"text": "Condiments"
}, {
"value": 3,
"text": "Confections"
}, {
"value": 4,
"text": "Dairy Products"
}, {
"value": 5,
"text": "Grains/Cereals"
}, {
"value": 6,
"text": "Meat/Poultry"
}, {
"value": 7,
"text": "Produce"
}, {
"value": 8,
"text": "Seafood"
}];
function getCategory(catID) {
return $.grep(categories, function(n, i) {
return n.value === catID;
})[0].text;
}
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
CategoryID: {
field: "CategoryID",
type: "number",
defaultValue: 1
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
}
}
}
}
});
var rowTemplateString = '<tr data-uid="#: uid #">' +
'<td>#: ProductName #</td>' +
'<td>#: getCategory(CategoryID) #</td>' +
'<td>#: UnitPrice #</td>' + '<td></td>' +
'</tr>';
var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');
var commonSettings = {
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [{
field: "ProductName",
title: "Product Name"
},
{
field: "CategoryID",
width: "150px",
//values: categories,
dataTextField: "text",
dataValueField: "value",
dataSource: categories,
filterable: {
ui: function(element) {
element.kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: categories
});
}
},
title: "Category"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "150px"
},
{
command: "destroy",
title: " ",
width: "110px"
}
],
editable: true
};
$("#grid").kendoGrid($.extend({
rowTemplate: rowTemplateString,
altRowTemplate: altRowTemplateString
}, commonSettings));
});
Note: In this demo I haven't tried to handle the template for the Delete column. I just left it blank.
Here's the Dojo http://dojo.telerik.com/oFulu

Try this One,According to your demo here
</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
},{
"value": 4,
"text": "Dairy Products"
},{
"value": 5,
"text": "Grains/Cereals"
},{
"value": 6,
"text": "Meat/Poultry"
},{
"value": 7,
"text": "Produce"
},{
"value": 8,
"text": "Seafood"
}];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{
field: "CategoryID",
width: "150px",
values: categories,
editor:function(container,options)
{
$('<input name-"' + options.fields +'"/>').
appendTo(container).kendoComboBox({
autoBind:false,
dataTextField:"text",
dataValueFiled:"value",
dataSource:new kendo.data.DataSource({
schema:{
model:{
id:"value",
fields:{
text:{},
value:{}
}
}
},
data:categories
})
})
},
title: "Category"
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
{ command: "destroy", title: " ", width: "110px"}],
editable: true
});
});
</script>