I am using DataGridPro to show data in the Frontend. I can see the data but I am unable to select the text and copy them by just clicking or selecting them
this is how my code looks like in
<Box sx={{ marginTop: 2, height: 600, width: '100%', ...wrapperSx }}>
<DataGridPro
{...gridProProps}
apiRef={gridApiRef}
componentsProps={{
loadingOverlay: { progress: progress, loading: loading },
footer: { getCdrDetailsCallback: getCdrDetailsCallback },
}}
loading={loading}
rows={rows}
{...otherProps}
/>
</Box>
Anything I am missing?
I tried by enabling editable:true but my table will open a detailed view on doubleClick so its not useful
Related
I want to show the payment button whenever the checkbox is checked and the page will automatically scroll down to show the button to the user.
Currently, I have written the code to display the payment button, but the user must scroll the page to see the button.
I hope you understand what I mean
<CheckBox
title="..."
textStyle={{
color: "#80d2ff",
fontWeight: "normal",
fontFamily: "iransansx",
}}
fontFamily="iransansx"
checked={check11}
containerStyle={{ backgroundColor: "#0000" }}
onPress={() => {
setCheck11(!check11);
}}
/>
</View>
{check11 && (
<Button
title="پرداخت"
color="#0000"
titleStyle={{
color: "#004568",
fontFamily: "iransansx",
}}
containerStyle={{
borderWidth: 2,
borderColor: "#004568",
borderRadius: 8,
width: "94%",
margin: 6,
backgroundColor: "#ECF9FF",
}}
/>
)}
I would be grateful if you could help me
Please do not rate negative
If someone has asked this question before me and received an answer, please link it
You could do this using hook useRef.
const scrollView = useRef();
const onPress = () => {
// enter your code for show payment button here
...
scrollView.current.scrollToEnd();
}
<ScrollView ref={scrollView}>
<CheckBox onPress={onPress} />
</ScrollView>
I am using Material UI 'Data Grid' to display the Data. Also, I am using its Export functionality to print a PDF.
As, The Datagrid has more than 10 columns to the content is overflowing on A4 Print Page but on A1, its displaying fine. So I want to change the default print size to 'A1'- I tried to change in #media print props but failed.
Here's my code for DataGrid:
<DataGrid
rows={rows}
columns={columns}
components={{Toolbar: GridToolbar, LoadingOverlay: LinearProgress}}
sx={{
'#media print': {
'.MuiDataGrid-main': {
width: 'fit-content',
fontSize: '10px',
height: 'fit-content',
overflow: 'visible',
},
marginBottom: 100,
},
}}
Background: Hello, I am using React with the latest MUI version of Material-UI. I am using Data-Grid in a separate file in my components folder. I call the component from my App and use states to handle adding rows. On init 50 rows are added.
Issue: When I add onRowEditStart={console.log("Start")} & onRowEditStop={console.log("stop")} to the DataGrid component, they are only fired on page load, but if I edit a column after, no events are fired?
Whole components/DataGrid.js added.
If anyone has info on this would be great, thanks!
import * as React from 'react';
import { DataGrid, GridToolbar } from '#mui/x-data-grid';
import Box from '#mui/material/Box';
import Stack from '#mui/material/Stack';
import Button from '#mui/material/Button';
export default function Table(props) {
const [rows, setRows] = React.useState(props.rows);
React.useEffect(() => {
setRows(props.rows);
}, [props.rows]);
return (
<div style={{ width: '100%' }}>
<Stack
sx={{ width: '100%', mb: 1 }}
direction="row"
alignItems="flex-start"
columnGap={1}
>
</Stack>
<Box sx={{ height: 400, bgcolor: 'background.paper' }}>
<DataGrid autoHeight
components={{
Toolbar: GridToolbar,
}}
pageSize={25}
rowsPerPageOptions={[25, 50, 100]}
onRowEditStart={console.log("Start")}
onRowEditStop={console.log("stop")}
experimentalFeatures={{ newEditingApi: true }}
rows={rows}
columns={props.columns}
loading={props.rows.length === 0}
columnGap={1}
rowHeight={75}
/>
</Box>
</div>
);
}
The reason for this is because both onRowEditStart and onRowEditStop accept functions.
If you replace your code with the following, it will work.
onRowEditStart={() => console.log("Start")}
onRowEditStop={() => console.log("stop")}
Notice the difference in your code.
onRowEditStart={console.log("Start")} // evaluated on page load
onRowEditStop={console.log("stop")} // evaluated on page load
By passing a function (onRowEditStart={() => console.log("Start")}), the console.log("Start") will only be run when a row edit has started.
I created a Data Grid table with 10 columns. It looks great on big screens but when I squeeze it below 1380 px, I expect to see a horizontal bar scrolling but it looks terrible.
I don't want to switch to another library and just need to fix this horizontal scrolling problem. In the docs, it works perfectly. But I use renderCell and I think that cause the problem. But couldn't solve it still.
Here is how it looks like in big screens:
Here how it looks like at 1303 px:
And here on mobile sizes it can scroll but its sequeezed a lot and looks terrible:
I tried many suggestions on stack but couldn't find any solution still.
Here is my styled DataGrid props:
<DataGridStyled
rows={getRowData()}
autoHeight
rowHeight={80}
columns={columns}
rowsPerPageOptions={[5, 10, 15, 30, 100]}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
checkboxSelection
disableSelectionOnClick
pagination
scrollbarSize={50}
/>
Here is the 5th column (I used renderCell maybe its because of this?):
{
field: 'bloodPressure',
headerName: 'BP (mmHg)',
headerAlign: 'center',
align: 'center',
type: 'string',
flex: 1,
editable: false,
valueGetter: (params) =>
params?.row?.bloodPressure?.lastSys === undefined
? null
: params?.row?.bloodPressure?.lastSys,
renderCell: (params) => {
return (
<Tooltip
sx={{ cursor: 'pointer' }}
followCursor
title={
params.row?.bloodPressure?.lastDate === undefined
? 'No measurement'
: moment(params.row?.bloodPressure?.lastDate).fromNow()
}
>
<Box
display="flex"
alignItems="center"
justifyContent="center"
width={'60%'}
bgcolor={params.row?.bloodPressure?.riskColor}
borderRadius={1}
py={0.3}
>
<Typography variant="subtitle1" color="black">
{params.row?.bloodPressure?.lastSys === undefined ||
params.row?.bloodPressure?.lastDia === undefined
? '--'
: `${params.row?.bloodPressure?.lastSys?.toFixed(
0
)}/${params.row?.bloodPressure?.lastDia?.toFixed(0)}`}
</Typography>
<Typography
variant="subtitle1"
color="black"
sx={{
display: 'flex',
alignItems: 'center'
}}
>
{params.row?.bloodPressure?.lastSys === undefined &&
params.row?.bloodPressure?.lastDia === undefined ? null : params
.row?.bloodPressure?.lastSys +
params.row?.bloodPressure?.lastDia >
params.row?.bloodPressure?.previousSys +
params.row?.bloodPressure?.previousDia ? (
<ArrowUpwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
) : (
<ArrowDownwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
)}
</Typography>
</Box>
</Tooltip>
);
}
},
I am using react select for dropdown select, when i search in the options, the options are getting filtered but the searched text is not visible in the input box ,
This is my react select component
<Select value={props.selectedSpare} onChange={props.updateSelectedSpare}
options={props.components}
searchable={true}
onBlurResetsInput={false}
style={{
minHeight: '31px',
lineHeight: '1em',
padding: '10px',
width: '70%',
marginRight: '25px'
}}
/>
selectedspare value is an object with value and lebel properties ex: {value: null, label: null}
this is my onchange function
updateSelectedSpare = selectedSpare => {
this.setState({
selectedSpare: selectedSpare
? selectedSpare
: { value: null, label: null }
});
};
Please let me know what i am missing. Thanks