https://github.com/marmelab/ra-datagrid

Integration of Material-ui's <Datagrid> into react-admin
https://github.com/marmelab/ra-datagrid

Last synced: 5 days ago
JSON representation

Integration of Material-ui's <Datagrid> into react-admin

• Host: GitHub
• URL: https://github.com/marmelab/ra-datagrid
• Owner: marmelab
• License: mit
• Created: 2021-05-17T14:37:58.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-17T14:53:20.000Z (over 3 years ago)
• Last Synced: 2024-04-25T08:01:40.332Z (6 months ago)
• Language: TypeScript
• Size: 209 KB
• Stars: 29
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ra-datagrid

Integration of [Material-ui's ``](https://material-ui.com/components/data-grid/) into react-admin.

https://user-images.githubusercontent.com/99944/118509356-3e82ba00-b730-11eb-86ac-3f9895529e94.mp4

## Features

- Server-side filtering, sorting and pagination via the `dataProvider`

- Row selection

- Cell editing

- Hide / show columns

- All the material-ui `` features (additional props are passed down to it)

## Usage

Replace react-admin's `` by the one exported by this package. Make sure you set `pagination={false}` on the list as the Datagrid embarks its own pagination. 

```tsx

import { List } from "react-admin";

import { GridColDef, GridValueGetterParams } from "@material-ui/data-grid";

import { Datagrid, simpleFilterOperator } from "ra-datagrid";

const columns: GridColDef[] = [

  {

    field: "id",

    headerName: "Id",

    type: "string",

    width: 100,

    disableClickEventBubbling: true,

    filterOperators: simpleFilterOperator,

  },

  {

    field: "last_name",

    headerName: "Full name",

    description: "This column has a value getter and is not sortable.",

    sortable: true,

    flex: 1,

    valueGetter: (params: GridValueGetterParams) =>

      `${params.row.first_name || ""} ${params.row.last_name || ""}`,

    disableClickEventBubbling: true,

  },

  {

    field: "last_seen",

    headerName: "Last seen",

    type: "date",

    valueGetter: (params: GridValueGetterParams) =>

      new Date(params.row.last_seen || ""),

    width: 160,

    disableClickEventBubbling: true,

    editable: true,

    filterOperators: simpleFilterOperator,

  },

  {

    field: "total_spent",

    headerName: "Spent",

    type: "number",

    width: 150,

    disableClickEventBubbling: true,

    editable: true,

    filterOperators: simpleFilterOperator,

  },

];

export const CustomerList = (props: any) => (

  

    

  

);

```

## Contributing

```sh

## install dependencies for core package and example

yarn install

## build JS from ts

yarn build

## run example

yarn start

```

## License

MIT, sponsored by marmelab