Remix Using Complex Components - reactjs

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

Related

How to show FAQs with multiple categories using React FAQ Component

I am trying to create FAQ page in my react project using below package:
https://www.npmjs.com/package/react-faq-component
I am able to show FAQ with 1 category.
I want to show questions/answers with different categories:
Code:
import React, { useState } from 'react';
import FaqData from 'react-faq-component';
function Faq() {
const [rows, setRowsOption] = useState(null);
const data = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
return (
<div>
<h2 className="section-title">My FAQ&apos;s</h2>
<div className="faq-style-wrapper">
<FaqData data={data} getRowOptions={setRowsOption} />
</div>
</div>
);
}
If any other demo/library can give me desired output, please suggest those as well.
As suggested by #Arkellys I have used one component per category & its worked for me. Thanks again #Arkellys.
I am adding answer below for more details:
import React, { useState } from 'react';
import FaqData from 'react-faq-component';
function Faq() {
const [rows, setRowsOption] = useState(null);
const data1 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
const data2 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
const data3 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
return (
<div>
<h2 className="section-title">My FAQ&apos;s</h2>
<div className="faq-style-wrapper">
<FaqData data={data1} getRowOptions={setRowsOption} />
<FaqData data={data2} getRowOptions={setRowsOption} />
<FaqData data={data3} getRowOptions={setRowsOption} />
</div>
</div>
);
}

Element type is invalid: React Js

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

Adding colDefs dynamically

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/

What am I doing wrong with the ag-grid in react?

I'm trying to make the the ag-grid group selectable if say for example we have the care maker and you can select the parent and everything underneath that parent also gets selected.
I've looked into the ag-grid documentation but it looks like I'm doing everything right.
Here's my code below:
import React, { useState } from 'react';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
const DummyGrid = () => {
const [gridApi, setGridApi] = useState(null);
const columnDefs = [
{
headerName: 'Make', field: 'make', checkboxSelection: true , rowGroup: true, groupSelectsChildren: true
},
{
headerName: 'Model', field: 'model'
},
{
headerName: 'Price', field: 'price'
}
]
const onGridReady = (params) => {
setGridApi(params.api);
}
const rowData = [
{ make: 'Honda', model: 'Chev', price: 6000 },
{ make: 'Honda', model: 'Civic', price: 120000 },
{ make: 'Toyota', model: 'Celica', price: 5000 },
{ make: 'Mitsubishi', model: 'GTR', price: 5000 }
]
const handleClick = () => {
const selectedNodes = gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringRepresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
console.log(`The Data selected: ${selectedDataStringRepresentation}`);
}
return(
<div className="ag-theme-balham"
style={{
width: 600,
height: 600
}}>
<button onClick={handleClick}>Click this!</button>
<AgGridReact
rowData = {rowData}
columnDefs={columnDefs}
rowSelection="multiple"
onGridReady={onGridReady}
/>
</div>
);
};
export default DummyGrid;
As you can see from the output below that they're not grouping even though they the same maker. What am I doing wrong?
2 things you're doing wrong.
First, you need to import the RowGroupingModule module and pass it to your grid as modules:
import { RowGroupingModule } from '#ag-grid-enterprise/row-grouping';
modules={[RowGroupingModule]}
Secondly, you need to set groupSelectsChildren on the grid itself, not on your column definition:
groupSelectsChildren={true}
Demo.

React Data Grid shows bad

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';

Resources