I'm using react-admin 2.6.2 and trying currently to edit the layout of the List view. At first I wanted to remove action buttons completely, and I found the answer here at Stackoverflow. I thought, that using empty CardActions would be enough, but there's still empty ListToolbar taking space before my <List> starts. The toolbar is created by List automatically, is there any way to for example edit styles of that toolbar so I could hide it or set the height to 0px?
I guess one option is to create my custom List.js based on this, but it would be best to use the original source files, so they are also updated when there are new updates to react-admin.
JS code:
const NoneActions = props => (
<CardActions />
);
class DemoList extends Component {
render() {
return (
<div>
<List
{...props}
actions={<NoneActions />}
>
<Datagrid>
<TextField source="name" />
<ShowButton />
</Datagrid>
</List>
</div>
);
}
}
Here's the toolbar in DOM:
<div class="MuiToolbar-root-519 MuiToolbar-regular-521 MuiToolbar-gutters-520 ListToolbar-toolbar-293">
try: <List actions={null} {...props}> the empty space before the list disappears.
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 have a common grid component where I define the structure of the grid and also structure of a button bar that goes on top of the grid.
Common-grid.js
<Box height='100%' width='100%' position='absolute'>
<div className="common-grid">
<div className="button-bar">
</div>
<div className="ag-grid">
</div>
</div>
</Box>
I pass data to the grid from my other component based to fill in the grid.
MyComponent.js
{gridData.length > 0 && <Grid tableData={gridData} columnData={activeListColumnDef} {...props}/>}
Along with the data, I would also like to pass icon buttons that I would like to see in button bar.
<IconButton
icon={<AddIcon />}
onClick={onClickOpenActiveListEditor}
/>
<IconButton
icon={<EditIcon />}
/>
I do not want to define icon buttons in the common component but pass it as props. Is it possible to pass such html elements along with its event listeners as props? Please help!
Sure, it's called a render prop. Just directly pass the node like this:
// in the parent component
<Grid
tableData={gridData}
columnData={activeListColumnDef}
icon={<AddIcon onClick={onClickOpenActiveListEditor} />}
{...props}
/>
// in the Grid component
function Grid({tableData, columnData, icon}){
return (
<>
// grid stuff
{icon && icon}
</>
)
}
If you need typescript support, the node would typed as such:
interface GridProps{
// stuff
icon?: React.ReactNode;
}
You could do something like:
const renderIcon = (onClick) => {
return <Icon onClick={onClick} />
}
...
<IconButton renderIcon={renderIcon} />
Then, inside IconButton:
{renderIcon()}
We have a Kendo React grid and we need to show the No record found the message when data is empty.
<Grid
sortable
filterable
expandField="expanded"
detail={props => <DetailComponent
{...props}
onChange={this.handleDetailTemplateChange}
changed={[]}
/>}
onExpandChange={this.expandChange}
pageable={this.state.pageable}
// scrollable="true"
editField="inEdit"
data={this.state.providersPage}
sort={this.state.sort}
onSortChange={this.handleSortChange}
filter={this.state.filter}
onFilterChange={this.handleFilterChange}
onPageChange={this.handlePageChange}
total={this.state.total}
skip={this.state.skip}
pageSize={this.state.pageSize}
onItemChange={this.handleProviderChange}
resizable>
<GridColumn field="affiliationRelationshipStatusName" title="Network Relationship" filterCell={this.CategoryFilterCell}
cell={NetworkRelationshipCell} width="245px"/>
<GridColumn field="address" title="Places" filterable={false} cell={NetworkPlaceCell}
width="245px"/>
</Grid>
See Kendo documentation but couldn't find any solution. Please suggest
The packages comes with GridNoRecords exported component, that you can place inside the grid. It will be rendered when there are no records.
Import it as you import the grid itself:
import { Grid, GridColumn, GridNoRecords } from '#progress/kendo-react-grid'
Then place it inside the grid, with some content inside it.
<Grid data={[]}>
<GridNoRecords>
There is no data available
</GridNoRecords>
<GridColumn field="id" />
<GridColumn field="name" />
</Grid>
The above example is from the official documentation. I believe this is what you are looking for.
I have a shopping list but I want to see the detail in the same list. With what element can I make the touch of the arrow to show me the detail.
List
<List {...props} >
<Datagrid rowClick="edit" expand={<ItemsProductos />}>
<TextField source="id" />
<TextField source="numero" label="Numero Comprobante" />
<DateField source="fecha" />
</Datagrid>
</List>
React-admin will pass the current record to the component used as expand prop, so you can write your <ItemProductos> component as follows:
const ItemProductos == ({ record }) => (
<span>{record.fecha}</span>
);
This is documented in the react-admin documentation:
https://marmelab.com/react-admin/List.html#expand
I need to customize Edit component in two ways:
Add custom button, but not to the upper panel (with 'List' and
'Refresh' buttons), but at the bottom of the component (next to the default 'Save'
button).
Turn off redirect on default 'Save' button click (to make it just
save and stay on page).
How do I achieve this?
I came accross this unanswered question. Since I just did something like this very recently myself I will share how I did it here. I am using admin on rest 1.4.0 btw.
So, on your <Edit> component, add this toolbar={<MyCustomToolbar />}. Then create a custom toolbar with your buttons in it. On the button you can use redirect to redirect to another page.
Code example:
import { SaveButton, Toolbar, TextInput, Edit, SimpleForm } from 'admin-on-rest';
const MyToolbar = props =>
<Toolbar {...props} >
<SaveButton label="Save & to dashboard" redirect="/" />
.. more buttons here..
</Toolbar>;
export const EditForm = (props) => (
<Edit title="Edit" {...props}>
<SimpleForm toolbar={<MyToolbar />}>
<TextInput source="company_website" type="url" />
<TextInput source="address_street" />
<TextInput source="address_zip" />
<TextInput source="address_unitnr" />
<TextInput source="address_city" />
</SimpleForm>
</Edit>
);
Hope this helps!