@dslab/ra-datagrid-input NPM

React-Admin Datagrid Input

The Datagrid Input is a React-Admin component that, along with other existing components, enables you to deal with relationships between records. Using the Datagrid component, it allows the addition and/or removal of reference records (records belonging to a resource associated with the one undergoing creation or modification by a relationship).

It consists of a paginated and sortable datagrid with remove buttons for both single and bulk operations. The addition occurs through another datagrid contained in a dialog which, supporting sorting, filtering and pagination, displays all available records.

Install

yarn install @dslab/ra-datagrid-input

Usage

import {
    Edit,
    SimpleForm,
    TextInput,
    ReferenceArrayInput,
    TextField,
} from 'react-admin';
import { DatagridInput } from '@dslab/ra-datagrid-input';

const PostEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="post_title" />
            <ReferenceArrayInput source="tags_ids" reference="tags">
                <DatagridInput>
                    <TextField source="tag_name" />
                    <TextField source="tag_description" />
                </DatagridInput>
            </ReferenceArrayInput>
        </SimpleForm>
    </Edit>
);

Props

The component accepts the following props:

Prop	Required	Type	Default	Description
`children`	Optional	`ReactNode`	`<RecordRepresentation />`	The list of `<Field>` components to render as columns.
`dialogChildren`	Optional	`ReactNode`	children	The list of `<Field>` components to render as columns of the dialog's datagrid. E.g. `dialogChildren={<TextField source="tag_name" />}` or `dialogChildren={[<TextField source="tag_name" />, <TextField source="tag_description" />]}`
`sort`	Optional	`object`	-	The initial sort parameters for both lists.
`dialogTitle`	Optional	`string`	'ra.message.bulk_update_title' translation + resource's name	The title for the dialog.
`dialogFilters`	Optional	`ReactElement`	-	The filters to display in the toolbar of the dialog's list.
`dialogFilter`	Optional	`object`	-	The permanent filter values of the dialog's list.
`dialogFilterDefaultValues`	Optional	`object`	-	The default filter values of the dialog's list.
`dialogQueryOptions`	Optional	`object`	-	The options to pass to the `useQuery` hook of the dialog's list.

Author

SmartCommunityLab

Website: http://www.smartcommunitylab.it/
Github: @smartcommunitylab

Show your support

Give a ⭐️ if this project helped you!

License

ra-core

1.0.0

11 months ago