I am developing teams app using react js. I got the following error when running the application.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Tab.
Below the source code.
import React from 'react';
import {useState} from 'react';
import AgGridReact from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import AgGridColumn from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import ReactDOM from 'react-dom';
//var showFunction = Boolean(process.env.REACT_APP_FUNC_NAME);
const InitialRowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
function Project() {
const [rowData, setRowData] = useState(InitialRowData);
return (
<div className="ag-theme-alpine" style={{height: 400, width: 600}}>
<AgGridReact
rowData={rowData}
>
<AgGridColumn field="make"></AgGridColumn>
<AgGridColumn field="model"></AgGridColumn>
<AgGridColumn field="price"></AgGridColumn>
</AgGridReact>
</div>
);
}
const element = <Project></Project>
ReactDOM.render(element, document.getElementById("root"));
Try adding columns the same way you are adding the rows
const columnDefs = [
{ field: 'athlete' },
{ field: 'sport' },
{ field: 'age' },
];
const [columnData, setColumnData] = useState(InitialColumnData);
And then set it in return the same way you set rows
Related
Trying to include AG Grid https://www.ag-grid.com/react-data-grid/ in a Remix project but it is not rendering.
No errors in terminal console or web console, In react project this works fine. So something with remix and complex components. Have tried wrapping in ClientOnly from remix-utils but no difference.
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import{ClientOnly } from 'remix-utils';
export default function Grid() {
const [rowData] = useState([
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
]);
const [columnDefs] = useState([
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
])
return (
<ClientOnly>
<div className="ag-theme-alpine" style={{height: 400, width: 600}}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}>
</AgGridReact>
</div>
</ClientOnly>
);
}
Found the error. It was missing the
<Scripts />
tag in the root.tsx
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 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';
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"));
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
import React, {Component} from 'react'
var CanvasJSReact = require('./canvasjs.react');
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
export class Chart1 extends Component {
render() {
const options = {
title: {
text: "Basic Column Chart in React"
},
data: [{
type: "column",
dataPoints: [
{ label: "Apple", y: 10 },
{ label: "Orange", y: 15 },
{ label: "Banana", y: 25 },
{ label: "Mango", y: 30 },
{ label: "Grape", y: 28 }
]
}]
}
return (
<div>
<CanvasJSChart options = {options}
/* onRef = {ref => this.chart = ref} */
/>
</div>
);
}
}
Try export default class Chart1 extends Component {