I have a problem with ReactDataGrid component. I have already installed react-data-grid. The code is the same as in the reac grid's web:
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' }];
const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];
class App extends React.Component {
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150} />
)
}
}
export default App;
and i get:
Result
Thank you!
Import the CSS like so :
import 'react-data-grid/dist/react-data-grid.css';
It should be fine.
import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "count", name: "Count", editable: true }
];
const rows = [
{ id: 0, title: "row1", count: 20 },
{ id: 1, title: "row1", count: 40 },
{ id: 2, title: "row1", count: 60 }
];
class App extends React.Component {
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150}
enableCellSelect={true}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
https://codesandbox.io/s/rdg-cell-editing-h8bnr
the answer is in the above code this above code is working
You don't really need to downgrade. The issue is that the css is not being imported.
If you can import css from node-modules, it'll work.
Workaround for me was I took the whole css and we are now self-maintaining the css, making changes when needed.
I couldn't load the css either, I got around this by including
import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';
instead of
import ReactDataGrid from 'react-data-grid';
Related
I'm trying to add the column definition programmatically,on button click, instead of hardcoding it in my ReactJS page.
{
headerName: "Product1",
resizable: true,
wrapText: true,
cellStyle: {
'white-space': 'normal'
},
autoHeight: true,
hide: true,
cellRendererFramework.MyCustomColumnRenderer
}
Not sure how to go about implementing this?
Thanks for your help.
Use setColumnDefs(columnDefs)
const columnDefs = getColumnDefs();
columnDefs.forEach(function (colDef, index) {
colDef.headerName = 'Abcd';
});
this.gridApi.setColumnDefs(columnDefs);
https://plnkr.co/edit/0ctig4P2yzPjhycB
You could define the columnDefs in the grid to use a state and then set the state dynamically.
import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const App = () => {
const rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
];
// use the colDefs state to define the column definitions
const [colDefs, setColDefs] = React.useState([{ field: 'make' }]);
// when the button is pressed set the state to cause the grid to update
const handleAddColumns = ()=> {
const dynamicFields = [
{ field: 'make', header: 'Car Make' },
{ field: 'model', sortable: true },
{ field: 'price' },
];
setColDefs(dynamicFields);
}
return (
<div>
<button onClick={handleAddColumns}>Add Column Defs</button>
<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
<AgGridReact
rowData={rowData}
columnDefs={colDefs}>
</AgGridReact>
</div>
</div>
);
};
render(<App />, document.getElementById('root'));
Another approach is to use the Api's setColumnDef method:
import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const App = () => {
const rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 },
];
// using state to define the columns initially
const [colDefs, setColDefs] = React.useState([{ field: 'make' }]);
// get a reference to the API when the onGridReady is fired
// see the Grid definition in the JSX
const [gridApi, setGridApi] = React.useState([]);
const handleAddColumns = ()=> {
const dynamicFields = [
{ field: 'make', header: 'Car Make' },
{ field: 'model', sortable: true },
{ field: 'price' },
];
// use the API to set the Column Defs
gridApi.setColumnDefs(dynamicFields);
}
return (
<div>
<button onClick={handleAddColumns}>Add Column Defs</button>
<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
<AgGridReact
rowData={rowData}
columnDefs={colDefs}
onGridReady={ params => {setGridApi(params.api)} }
></AgGridReact>
</div>
</div>
);
};
render(<App />, document.getElementById('root'));
The examples in the documentation should help:
https://www.ag-grid.com/react-data-grid/column-definitions/
https://www.ag-grid.com/react-data-grid/column-updating-definitions/
There is also a blog post from AG Grid that covers dynamic column definitions:
https://blog.ag-grid.com/binding-and-updating-column-definitions-in-ag-grid/
I am loading a react-data-grid with a data source that is populated row by row (a row is added once a second). Once it gets to 9 rows it stops adding rows. I am also having another problem where the grid will not show up until I change the zoom on the screen. It is blank beforehand. Here is my grid element
import React, { Component } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
const columns = [
{ key: 'timeStamp', name: 'Date/Time' },
{ key: 'gpsAccuracyValue', name: 'GPS Accuracy' },
{ key: 'speedMph', name: 'Speed' },
{ key: 'battery', name: 'Battery' },
{ key: 'id', name: 'id' },
];
const rows = [
{ id: 0, title: 'Example' },
{ id: 1, title: 'Demo' }
];
class TestGrid extends Component {
render(){
return (
<div>
<DataGrid
columns={columns}
rows={this.props.data}
rowsCount={this.props.data.length}
minHeight={500}
/>
</div>
);
}
}
export default TestGrid;
I pass in the data like this
<TestGrid data={this.props.deviceData} />
CodeSandbox
Adding style={{ height:500 }} seems to have fixed a similar problem I was having and displays more than 9 rows.
In antd table, while rendering the data can i make a row as disabled.
so i have a dataSource so while rendering the table i need to make a table row as disabled based on the dataSource property.
In the dataSource there is a property of enabled, if its false i need to make the row as disabled kind of css.
first i thought of having a className but is there any inbuilt way, i dont want to have the selected kind of checkbox just plane a row to be disabled.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";
import "./styles.css";
function App() {
const dataSource = [
{
key: "1",
name: "Mike",
age: 32,
address: "10 Downing Street",
enabled: true
},
{
key: "2",
name: "John",
age: 42,
address: "10 Downing Street",
enabled: false
}
];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
return (
<>
<Table dataSource={dataSource} columns={columns} />;
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Codesandbox
is there any way for this
Was able to find the solution
in App.js
<Table dataSource={dataSource} rowClassName={record => !record.enabled && "disabled-row"}
columns={columns} />;
and in css file
.disabled-row {
background-color: #dcdcdc;
}
Is there any way to rewrite styles of TableSummaryRow from '#devexpress/dx-react-grid-material-ui' library?
What I have: a component which renders table (using '#devexpress/dx-react-grid-material-ui' library) and in the last row outputs the total number of rows in the table.
What I need to do: style table cell in which TableSummaryRow renders result.
I already tried this solution, but it don't work for me.
Here is simpifide code of my component:
import React from 'react';
import { SummaryState } from '#devexpress/dx-react-grid';
import {
TableHeaderRow,
TableSummaryRow
} from '#devexpress/dx-react-grid-material-ui';
import { ExtendedGrid } from 'components/DxGrid/index';
const Table = ({ rows }) => (
<ExtendedGrid rows={rows} columns={reportColumns}>
<SummaryState totalItems={[{ columnName: 'userName', type: 'count' }]} />
<TableHeaderRow />
<TableSummaryRow messages={{ count: 'Number of rows' }} />
</ExtendedGrid>
);
export default Table;
I figured out this by myself, maybe it will be useful for somebody.
This official docs page helped me. So I used makeStyles method.
Here is working DEMO.
And the final component (based on Andrei Konstantinov's answer) code:
import React from "react";
import { render } from "react-dom";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from "#material-ui/styles";
import { SummaryState, IntegratedSummary } from "#devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
TableSummaryRow
} from "#devexpress/dx-react-grid-material-ui";
const useStyles = makeStyles({
root: {
"& tfoot": {
"& td": {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
"&:empty": {
background: "none"
}
}
}
}
});
const Hook = () => {
const data = {
totalSummaryItems: [{ columnName: "weight", type: "sum" }],
columns: [
{ name: "name", title: "Name" },
{ name: "weight", title: "Weight" }
],
rows: [
{ name: "Sandra", weight: 123 },
{ name: "Andy", weight: 9000 },
{ name: "Einstein", weight: 56 },
{ name: "Bob", weight: 11 }
]
};
const { rows, columns } = data;
const classes = useStyles();
return (
<Paper className={classes.root}>
<Grid rows={rows} columns={columns}>
<SummaryState totalItems={data.totalSummaryItems} />
<IntegratedSummary />
<Table />
<TableHeaderRow />
<TableSummaryRow messages={{ sum: "Total weight of the group" }} />
</Grid>
</Paper>
);
};
render(<Hook />, document.getElementById("root"));
According to TableSumRow's docs you need to use SummaryState component.
Also, for some reason, I can't make it work without IntegratedSummary component as well, even if it's marked as optional.
You can find working demo here.
And here is a code from demo. There is a total weight row for the whole team.
import React from "react";
import { render } from "react-dom";
import { SummaryState, IntegratedSummary } from "#devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
TableSummaryRow
} from "#devexpress/dx-react-grid-material-ui";
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
totalSummaryItems: [{ columnName: "weight", type: "sum" }],
columns: [
{ name: "name", title: "Name" },
{ name: "weight", title: "Weight" }
],
rows: [
{ name: "Sandra", weight: 123 },
{ name: "Andy", weight: 9000 },
{ name: "Einstein", weight: 56 },
{ name: "Bob", weight: 11 }
]
};
}
render() {
const { rows, columns } = this.state;
return (
<Grid rows={rows} columns={columns}>
<SummaryState totalItems={this.state.totalSummaryItems} />
<IntegratedSummary />
<Table />
<TableHeaderRow />
<TableSummaryRow messages={{ sum: "Total weight of the group" }} />
</Grid>
</Paper>
);
}
}
render(<App />, document.getElementById("root"));
I'm implementing ReactTable, the first example from its documentation, but each cell from the table goes to a new line:
ReactTable
This is my react table component:
import React, {PureComponent} from 'react';
import ReactTable from 'react-table';
export default class ExampleTable extends PureComponent {
render() {
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
name: 'Bla bla',
age: 29,
friend: {
name: 'RAra Ra',
age: 98,
}
}]
const columns = [{
Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
return <ReactTable
data={data}
columns={columns}
/>
}
}
And this is how I import the component:
import ExampleTable from './tables/example';
class TableView extends Component {
getExample() {
return (
<ExampleTable/>
)
}
render() {
return (
<div>
{this.getExample()}
</div>
);
}
}
Any idea why each cell is going to a new line?
Probably is something stupid I'm just starting with React.
Thanks in advance.
Found it!
It was something stupid, I wasn't importing the ReactTable css:
import "react-table/react-table.css";