Currently using react-data-grid and it only shows a single line text, however I am trying to display multi line text.
sandbox:
https://codesandbox.io/s/5vy2q8owj4?from-embed
You can override the data-grid cell content class to your file.
Render:
<div class="react-grid-multiline-content">
<ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={rows.length}/>
</div>
Style:
.react-grid-multiline-content .react-grid-Cell__value {
white-space: normal !important;
}
I was able to solve a similar problem by resetting the cells' line-height CSS property.
Before:
After:
My columns:
const columns: Column<MyRow>[] = [
{
key: "id",
name: "ID"
},
{
key: "addressSummary",
name: "Address",
formatter: (formatterProps) => <AddressBlock {...formatterProps.row} />,
cellClass: "normalLineHeight" // Need to reset the line height on affected cells
}
];
CSS:
.normalLineHeight {
line-height: normal;
}
Here is the sample code: https://codesandbox.io/s/react-data-grid-multi-line-content-fix-u6im0
getRowHeight={() => 'auto'}
It will break lines automaticaly in mui DataGrid
Related
I'm trying to add extra components to a row in a MUI DataGrid.
For example, in the DataGrid below, I want to add some text below the main contents of a row. (Notice row ID 5's First name column's value)
Is there an API available that allows for this kind of modification without having to modify the core components? If not, how can I create a customized component that allows for this behavior?
Sandbox example
You can use the renderCell property in the field. Inside the return you can write you component like you would do normaly.
const columns = [
{ field: "id", headerName: "ID", width: 90 },
{
field: "firstName",
headerName: "First name",
width: 150,
editable: true,
renderCell: (params) => {
return (
<Stack>
<span>{params.value}</span>
<span>Your extra text</span>
</Stack>
);
}
},
...
]
Here is the working codesandbox based on your code
I have a tree panel with 4 columns:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',{
pluginId : 'cellEditing',
clicksToEdit: 1
});
var tree = new Ext.tree.Panel({
store:treestore,
plugins : [
cellEditing
],
selModel:{
selType:'cellmode'
},
defaults:{
tdCls:'greyColumn'
},
columns:[
somecolumns
]
});
And in my css I have the style:
.x-grid-row .greyColumn {
background-color:#f2f2f2;
}
I´m trying to add this piece of code in the selModel definition:
listeners: {
select: function (cellModel, record, rowIndex) {
cellModel.view.addRowCls(rowIndex, 'style');
},
deselect: function (cellModel, record, rowIndex) {
cellModel.view.removeRowCls(rowIndex, 'style');
},
scope: this
}
And in my css the "style" definition:
.x-grid-row.style .x-grid-cell {
background-color: #edbcb4 !important;
}
When the tree loads, i see the columns with the background grey, but when I select one cell to edit, it turns red for a moment and returns to grey and I don't know how to fix it or avoid it. I want the row of the cell i´m editing red, not returning to grey.
Use edit and beforeedit event's in your celledit component form styled row
Fiddle
I already spent too much time searching on how to configure the column headers of Antd tables, in the official Antd table docu and elsewhere, but I was not successful: Is there a simple way of adjusting the word-wrap of the column header?
Right now, if the column is too small (e.g. when resizing the browser window), letters are floating into new lines in an uncontrolled manner. English hyphenation would be cool, but for a start I would appreciate having 2 or 3 ellipsis dots instead of freely dropping characters.
Any Antd-experts out there who could help me out, please?
Minimal non-working example
import { Table } from "antd";
const { Column } = Table;
const dataSource = [
{
key: '1',
name: 'Mike',
},
{
key: '2',
name: 'John',
},
];
const columns = [
{
title: 'My very-very-very long column-name',
dataIndex: 'name',
key: 'name',
},
];
<Table dataSource={dataSource} columns={columns} />;
Related questions
Overwriting a single (nested) property when extending a React class is the more general problem I am facing.
How can we configure the Header of ant design table component?
Customize React Antd table header with table data
Table.Column.title accepts a ReactNode, so you only need to render an Ellipsis component.
You should use antd built-in Ellipsis, for that use Typoghrapy API.
Note: You should strain container's width so the ellipsing will work:
const COLUMN_STYLE = { width: 200 };
<Typography.Text ellipsis={true} style={COLUMN_STYLE}>
A very long text
</Typography.Text>
You can achieve the same effect with pure CSS, refer to text-overflow.
const dataSource = [
{
key: '1',
name: 'Mike'
},
{
key: '2',
name: 'John'
}
];
const COLUMN_STYLE = { width: 200 };
const customColumn = {
title: (
<Typography.Text ellipsis={true} style={COLUMN_STYLE}>
My very-very-very long column-name My very-very-very long column-name My
very-very-very long column-name
</Typography.Text>
),
dataIndex: 'name',
key: 'custom'
};
const normalColumn = {
title: 'My very-very-very long column-name',
dataIndex: 'name'
};
const TOTAL_COLUMNS = 6;
const columns = [...Array(TOTAL_COLUMNS).keys()].map(key => ({
...normalColumn,
key
}));
const App = () => (
<Table dataSource={dataSource} columns={[customColumn, ...columns]} />
);
Since I am (yet) stuck with an old version of Antd, I went the inline-CSS way suggested by Dennis Vash. Within the render() function, I defined
var myColTitleStyle = {
textOverflow: 'ellipsis',
// overflow: "hidden",
whiteSpace: 'nowrap'
};
Interestingly, I had to comment the parameter overflow out, although https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow suggests that it is required for the property text-overflow to work. Also note the CamelWritingStyle of the css-properties within React.
Inside the component, the imports are
import { Table } from "antd";
const { Column, ColumnGroup } = Table;
The actual call of Antd's Column contains a <div> within the title, plus the inline-CSS:
<Column
title={<div style={myColTitleStyle}>My long-long title</div>}
width=10
>
Please also note that textOverflow will only work with absolute widths, which are dimensionless in React. It will not work when using percentage-widths.
I am still learning things on both react and cxjs. I am trying to develop a lookup widget which pops a window with a grid and the user can search and select an entry from that.
I want to use a Link within cxjs grid cell and when clicking the link I need to call a controller method with id of that particular row (record.id). Below is what I have tried with no success.
.....
style="max-width: 500px; width: 500px; max-height:500px;"
border={false}
columns={[
{
field: 'name', sortable: true,
items: <cx>
<Link onClick={(e, ins) => {
ins.store.set("$lookup.selText", e.? /* can I use e to get id and set it to store */);
ins.controller.selectRecord("{$record.id}"); // this doesn't work either
ins.parentOptions.dismiss();
}} text-tpl="{$record.name}"/>
</cx>,
header: {
style: 'width: 150px',
items: 'Name'
},
},
Could someone please shed some lights?
Thanks,
Priyanga
You can get the value from the store using the get function.
store.get("$record.id")
Is there a way to have UI Grid fill in empty rows to fill your grid's height?
CSS:
.myGrid{
width: 100%;
height: 600px;
}
HTML:
<div ui-grid="{data: folderData}" class="myGrid"></div>
JS:
$scope.folderData =[
{
"folderName": "My Photos",
"folderPath": "/path/pictures",
"fileCount": "400",
"fileSize": "150MB"
}
//...
];
As a hack you can always add empty rows at the end of the gridOptions data and it will add empty fields
for (i=0; i<30; i++)
scope.gridOptions.data. push({ name : 'folderName' , 'folderPath': '', 'fileCount' : '', 'filesize': '' });
Or event better add an background image as the background of the DIV
.ui-grid-render-container-body
that looks like the rows grid you use