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.
Related
I have added clickEvent in my code fo MDBDataTable. I have some columns in table, I have added clickEvent but it applying for all columns. I need click event for all columns except "addBtn" column. Becausse it is contains buttons - Edit and Delete.
const data = {
columns: [
{
label: "First Name",
field: "firstName",
sort: "asc",
width: 150,
},
{
label: "Last Name",
field: "lastName",
sort: "asc",
width: 150,
},
{
label: "Email",
field: "email",
sort: "asc",
width: 270,
},
{
label: "Role",
field: "authorities",
sort: "asc",
width: 200,
},
{
label: "Contact",
field: "phoneNumber",
sort: "asc",
width: 100,
},
{
label: "Type",
field: "userType",
sort: "asc",
width: 100,
},
{
label: "Action",
field: "addBtn",
sort: "asc",
width: 300,
},
],
rows:
userdData &&
userdData.length > 0 &&
userdData.map(rec => {
return {
firstName: rec?.firstName,
lastName: rec?.lastName,
email: rec?.email,
authorities: rec?.authorities[0],
phoneNumber: rec.phoneNumber !== null ? rec.phoneNumber !== null : "",
userType: rec?.userType,
addBtn: actionButtons(rec, rec?.id),
clickEvent: () => handleClick(rec)
}
}),
}
I have attached screen shot of the my page
Been trying to get MUI DataGrid to work for a few hours now, but for some reason the styling is placing the pagination information at the top of the table, on top of the column headers.
Maybe its something stupid I'm doing. I have tried a really simple version to illustrate my issues. Hope someone can please help me. BTW I use v5+ of MUI and DataGrid. React is v17+
import React, { FC } from "react";
import { DataGrid, GridRowModel } from "#mui/x-data-grid";
import { GridColDef } from "#mui/x-data-grid";
export const DataGridTest: FC = () => {
const paginationSize = 20;
const columns: GridColDef[] = [
{ field: "username", headerName: "Username", flex: 1, sortable: false, filterable: false },
{ field: "first_name", headerName: "First Name", flex: 1, sortable: false, filterable: false },
{ field: "last_name", headerName: "Last Name", flex: 1, sortable: false, filterable: false },
{ field: "email", headerName: "Email", flex: 1, sortable: false, filterable: false },
{ field: "phone", headerName: "Phone", flex: 1, sortable: false, filterable: false },
];
const rows: GridRowModel[] = [
{
id: 1,
username: "Tony",
first_name: "Tony",
last_name: "Ballony",
email: "Tony#test.com",
phone: "0754512222",
},
{
id: 2,
username: "Joe",
first_name: "Joeseph",
last_name: "Willson",
email: "joe#test.com",
phone: "0754512333",
},
];
return (
<div>
<DataGrid rows={rows} columns={columns} pageSize={paginationSize} />
</div>
);
};
The output looks like this.
So you can see that the pagination section that should be shown below the table data is instead positioned at the top of the page. In fact the border that should be around the data is also moved to the top. I hope someone can help me out here.
You have to specify the height of DataGrid, like:
//// Your code ////
return (
<div>
<DataGrid
style={{ height: "700px" }}
rows={rows}
columns={columns}
pageSize={paginationSize} />
</div>
);
};
You can use stylesheets instead of inline styles ofc. It's just an example.
Not sure what I'm doing wrong here, I'm trying the data grid from material, copy pasted the example code from their website:
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', width: 90 },
{
field: 'firstName',
headerName: 'First name',
width: 150,
editable: true,
},
{
field: 'lastName',
headerName: 'Last name',
width: 150,
editable: true,
},
{
field: 'age',
headerName: 'Age',
type: 'number',
width: 110,
editable: true,
}
];
const rows = [
{ id: 1, 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 },
];
const NFTSalesGrid: FunctionalComponent = () => {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={10}
rowsPerPageOptions={[5]}
/>
</div>
)
}
export default NFTSalesGrid;
And I'm receiving this error:
An unexpected error occurred. Error: No row with id #undefined found. Error: No row with id #undefined found
I'm trying to display an empty table (ie with no data to display), with a predefined height but with a set of empty lines.
By default, the table is displayed with no lines (its background is empty).
I would like to display empty lines. Even, if the number of rows is lower than the maximum number of allowed rows in a page, I would like to complete the display with empty lines.
I tried at least a dirty solution by adding manually an empty line, but even like this the result is not as exptected as the line is squashed and not well displayed. Cf attached image:
Below is the code of my component:
export default function MyComponent() {
const classes = useStyles();
const columns: GridColumns = [
{
field: 'data1',
headerName: 'DATA 1',
width: 130,
headerClassName: 'data--header',
cellClassName: 'data--cell',
},
{
field: 'data2',
headerName: 'DATA 2',
width: 130,
headerClassName: 'data--header',
cellClassName: 'data--cell',
},
{
field: 'data3',
headerName: 'DATA 3',
width: 130,
headerClassName: 'data--header',
cellClassName: 'data--cell',
},
{
field: 'data4',
headerName: 'DATA 4',
width: 130,
headerClassName: 'data--header',
cellClassName: 'data--cell',
},
{
field: 'data5',
headerName: 'DATA 5',
width: 130,
headerClassName: 'data--header',
cellClassName: 'data--cell',
},
{
field: 'data6',
headerName: 'DATA 6',
width: 130,
headerClassName: 'data--header',
cellClassName: 'data--cell',
},
];
const rows = [
{ id: "0", data1: "AAA", data2: "BBB", data3: "CCC", data4:"DDD", data5:"EEE", data6: "FFF" },
];
for(var i=1; i<10 ; i++) {
rows.push({id: i, data1: "", data2: "", data3: "", data4:"", data5:"", data6: ""})
}
return (
<div className={classes.root} style={{ height: 300, width: 700 }}>
<DataGrid disableColumnMenu hideFooter rowCount="10"rows={rows} columns={columns} rowHeight="30" />
</div>
);
}
Can anybody give my a hint to move on this task ? I'm a bit stuck (and if there is a solution without the manual creation of empty lines it would even be better :-)).
Thank you!
I got this table I want to color each row in a color depending on my data.
This works but seems to disable my onclick event in q-table for some reason.
#row-click="onRowClick"
I cannot figure out why this is happening. Im new to quasar and to be honest Im not 100% sure how this referens works
v-slot:body="props"
Eventually I want this to be a router event taking me to a different page on click.
<div id="q-app">
<div class="q-pa-md">
<q-table
:data="data"
:columns="columns"
row-key="id"
:filter="filter"
:loading="loading"
:rows-per-page-options="[5]"
#row-click="onRowClick"
>
<!-- If I remove the template here the onRowClick works -->
<template v-slot:body="props">
<q-tr :props="props" :class="tableFormat(props.row)">
<q-td v-for="col in props.cols" :key="col.name" :props="props">{{
col.value
}}</q-td>
</q-tr>
</template>
</q-table>
</div>
</div>
CSS:
.marked-row {
background-color: green;
}
.unmarked-row {
background-color: blue;
}
new Vue({
el: '#q-app',
data () {
return {
loading: false,
filter: "",
rowCount: 10,
columns: [
{
name: "name",
required: true,
label: "Name",
align: "left",
field: "name",
// format: val => `${val}`,
sortable: true
// style: 'width: 500px'
},
{
name: "age",
required: true,
label: "Age",
align: "left",
field: "age",
format: val => `${val}`,
sortable: true
},
{
name: "location",
required: true,
label: "Location",
align: "left",
field: "location",
format: val => `${val}`,
sortable: true
}
],
data: [
{
id: 1,
name: "Diana",
age: 5,
location: "Mumbai",
color: "blue"
},
{
id: 2,
name: "Billy",
age: 4,
location: "Detroit",
color: "green"
},
{
id: 3,
name: "Mimmi",
age: 3,
location: "New York",
color: "green"
},
{
id: 4,
name: "Bengan",
age: 4,
location: "Dubai",
color: "blue"
},
{
id: 5,
name: "Chloe",
age: 7,
location: "Paris",
color: "green"
},
{
id: 6,
name: "Ben",
age: 6,
location: "Los Angeles",
color: "blue"
}
]
}
},
methods: {
tableFormat(val) {
console.log(val)
if (val.color === "blue") {
return "marked-row";
} else {
return "unmarked-row";
}
},
onRowClick(evt, row) {
console.log("clicked on ", row );
}
}
})
Here is my pen:
https://codepen.io/haangglide/pen/MWeRaJW
Doc says
Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots
So you can use #click event on q-tr
codepen - https://codepen.io/Pratik__007/pen/oNLOogY