On a list view with few columns, the columns are very wide. I'd like to limit the width of at least some of these columns (except the last one):
Still trying to come up to speed on react-admin, react, and material-ui. I'm sure there's some styling involved. Could someone please point me in the right direction? Thanks.
UPDATE:
I added the style as Jozef suggested but no change. Here's what it looks like in Inspect:
There are two options to customize width of cells.
If you want to set width evenly you can change table-layout of Datagrid
<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit">
<TextField source="sourceName" />
<BooleanField source="active" />
<TextField source="organizationName" />
</Datagrid>
If it is not enough, well, we have to create our custom Datagrid with all of its dependencies so we can pass to TableCell component specific width. Be it percent or px value. This is not very well documented so you have to rely on source code which is in ra-ui-materialui
Here's the example
import {
Datagrid,
DatagridBody,
DatagridCell,
TextField,
BooleanField
} from 'react-admin';
import Checkbox from '#material-ui/core/Checkbox';
import TableCell from '#material-ui/core/TableCell';
import TableRow from '#material-ui/core/TableRow';
const CustomDatagridRow = ({ record, resource, id, onToggleItem, children, selected, basePath }) => (
<TableRow key={id}>
<TableCell style={{width="10%"}} padding="none">
{record.selectable && <Checkbox
checked={selected}
onClick={() => onToggleItem(id)}
/>}
</TableCell>
{React.Children.map(children, field => (
<TableCell style={{width: field.props.width}} key={`${id}-${field.props.source}`}>
{React.cloneElement(field, {
record,
basePath,
resource,
})}
</TableCell>
))}
</TableRow>
);
const CustomDatagridBody = props => <DatagridBody {...props} row={<CustomDatagridRow />} />;
const CustomDatagrid = props => <Datagrid {...props} body={<CustomDatagridBody />} />;
<CustomDatagrid style={{tableLayout: 'fixed'}} rowClick="edit">
<TextField width="20%" source="sourceName" />
<BooleanField width="20%" source="active" />
<TextField width="50%" source="organizationName" />
</CustomDatagrid>
Related
I am using the MUI V5 DataGrid component in my App and I want to customize the Footer component on the datagrid component but can't find any docs on how to go about it. This is the current default footer:
I want to achieve something resembling this:
Is there a way to reorganize the individual components and customize the styling as such? Any help is highly appreciated.
this sample code you can use for a custom footer in data grid MUI v5
first, you write your pagination component with full logic when the client clicked on the page, like this :
const RoundedPagination = () => {
return (
<Stack spacing={2}>
<Pagination
shape="rounded" page={page + 1} onChange={handleChange} count={props.numberOfPages}
renderItem={(item) => (
<PaginationItem
sx={{
color: 'main.0',
}}
components={{previous: ArrowRightRoundedIcon, next: ArrowLeftRoundedIcon}}
{...item}
/>
)}
/>
</Stack>
)
}
then you use this component in data grid like this :
<Grid container item justifyContent={'center'} alignItems={'center'} md={12}>
<DataGrid
page={page}
rows={props.dataGridValue.ROW}
columns={props.dataGridValue.COLUMNS}
autoHeight
headerHeight={52}
rowsPerPageOptions={[10]}
disableColumnMenu
Pagination
hideFooterSelectedRowCount
components={{
Pagination: RoundedPagination,
}}
/>
</Grid>
hope you get your answer good luck ;)
I want to create a table in my React functional component using hooks and the react material ui. I have an array of strings and I want to create a chip for each string in a table cell like so:
<TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon}/>}
/>
</TableCell>
I display an array of chips with
<div className={classes.chipContainer}> {Object.values(selectedUsersToDelete).map((user, index) => {
return (
<TableRow>
<TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon}/>}
/>
</TableCell><TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon}/>}
/>
</TableCell>
</TableRow>
)
})}
</div>
where selectedUsersToDelete is the value of useState.
I have tried every way of looping over the values in selectedUsersToDelete, but I cannot get react to render the table with the table rows 5 cells wide!
Also adding a deleteIcon and deletehandler to the Chip breaks them.
I'm trying to adapt this tutorial to use hooks: tut
import React, { useState, useEffect } from 'react';
// You'll need to add correct paths below
import AccountCircleIcon from './AccountCircleIcon';
import TableCell from './TableCell';
import TableRow from './TableRow';
import Chip from './Chip';
const ChipContainer = props => {
// State is initialized here
const [selectedUsersToDelete, setSelectedUsersToDelete] = useState([]);
// Props destructred
const { classes } = props;
// Just an example showing how you can set state once componnent has mounted
useEffect(
() =>
void setSelectedUsersToDelete([
'user1',
'user2',
'user3',
'user4',
'user5'
]),
[]
);
return (
<div className={classes.chipContainer}>
<TableRow>
{selectedUsersToDelete.map((user, index) => (
<TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon} />}
/>
</TableCell>
))}
</TableRow>
</div>
);
};
export default ChipContainer;
Using React-admin, I am using the ShowController component, which gives me more freedom to customize the ShowView. However, I would like to keep seeing the labels in the TextFields, but, they are gone.
This piece of code shows how I am using the ShowController and, it works partially: only show the record values, not the labels (I also tried without the prop "label", it doesn't work neither).
const OrderShow = props => {
return (<ShowController {...props}>
{controllerProps => {
return (
<Grid container spacing={8}>
<Grid item xs={3}>
<TextField label="ID" source="id" {...controllerProps} />
...
What is missing to show the labels as in the ShowView standard component?
TextFields' labels are usually filled by their source property.
If you want to use <ShowController> component with custom layout, I suggest you to create another custom component and use it inside of <Show>, <ShowView> or <SimpleShowLayout>.
I wrapped the fields with SimpleForm component to be able to show their labels and hide the Toolbar with custom CardActions.
Example:
const FormToolbar = () => (
<CardActions style={{display: 'none'}}>
</CardActions>
);
const FormDiv = ({controllerProps, ...props}) => (
<Grid container spacing={24}>
<Grid item xs={12}>
<SimpleForm toolbar={<FormToolbar/>}>
<TextField {...props} record={controllerProps.record} source="name"/>
</SimpleForm>
</Grid>
</Grid>
);
const OrderShow = props => (
<ShowController {...props} title="Order">
{controllerProps =>
<Show actions={<ShowActions pageType="show" />} {...props} {...controllerProps}>
<SimpleShowLayout>
<FormDiv controllerProps={controllerProps} />
</SimpleShowLayout>
</Show>
}
</ShowController>
);
export default OrderShow;
I have simple question
Is it possible to disable default sorting by column id? Or at least change it globally?
Thanks for answer
EDIT:
To be more specific, I have REST API (OData) which returns "Id" instead of "id" so I have to set sort everytime I use related component to prevent undefined errors.
I would welcome option to disable default sort in related components.
If you are looking for a solution to disable sort option for that column, you can use sortable={false}.
Example usage:
import React from 'react';
import { List, Datagrid, TextField } from 'react-admin';
export const PostList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" sortable={false} />
<TextField source="title" />
<TextField source="body" />
</Datagrid>
</List>
);
Or you can specify a default sort for the List.
export const PostList = (props) => (
<List {...props} sort={{ field: 'published_at', order: 'DESC' }}>
...
</List>
);
I am trying to combine a custom CSS table with the react virtualized window scroller. I currently can get the table to display, but am having trouble figuring out how to combine styling to that table, or add any logic to the table rows.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
autoHeight
width={1000}
height={700}
headerHeight={20}
rowHeight={30}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={table.length}
scrollTop={scrollTop}
rowGetter={({ index }) => table[index]}
>
<Column
label='Item1'
dataKey='item1'
width={150}
/>
<Column
width={200}
label='item2'
dataKey='item2'
/>
<Column
width={200}
label='item3'
dataKey='item3'
/>
<Column
width={150}
label='item4'
dataKey='item4'
/>
<Column
width={200}
label='item5'
dataKey='item5'
/>
</Table>
)}
</WindowScroller>
Definitely review the docs. You'll likely be passing both some type of style props and event props to the components - so you need to understand how those components define and accept those props. This is only possible by reviewing the documentation of the library.
EDIT:
Here are the propTypes for the <Table /> component:
https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
You'll see that it accepts custom event handlers like onRowClick but also style props like rowStyle