diff --git a/README.md b/README.md index 320beec..b2a2516 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,9 @@ # ODataGrid + +[![NPM Version](https://img.shields.io/npm/v/o-data-grid.svg)](https://www.npmjs.com/package/o-data-grid) +[![NPM Downloads](https://img.shields.io/npm/dt/o-data-grid.svg)](https://www.npmjs.com/package/o-data-grid) +[![NPM Bundle Size](https://img.shields.io/bundlephobia/minzip/o-data-grid)](https://www.npmjs.com/package/o-data-grid) + ODataGrid is an extension to the [MUI DataGrid](https://github.com/mui-org/material-ui-x) React component which implements features such as sorting, pagination, column selection, and filtering using the [OData Standard](https://www.odata.org/). This allows you to quickly create a powerful interface for browsing data with minimal back-end code. ![ODataGrid in action](https://raw.githubusercontent.com/jamerst/o-data-grid/main/images/o-data-grid.png) @@ -22,6 +27,17 @@ ODataGrid is still in the fairly early stages of development. I'm not aware of a Please report any issues that you find, and feel free to make feature requests. This will help to make ODataGrid better. +## Installation +ODataGrid can be installed using the appropriate npm package ([`o-data-grid`](https://www.npmjs.com/package/o-data-grid) or [`o-data-grid-pro`](https://www.npmjs.com/package/o-data-grid-pro)). + +The following material-ui packages must also be installed. I recommend using the latest versions where possible, but they must be v5.x.x. **These are peer dependencies so won't be installed automatically.** +- `@mui/system` +- `@mui/material` +- `@mui/x-date-pickers` +- `@mui/x-data-grid` for `o-data-grid` +- `@mui/x-data-grid-pro` for `o-data-grid-pro` +- `@mui/icons-material` + ## Usage Usage is very similar to the regular DataGrid. For the most basic scenario simply change the `DataGrid`/`DataGridPro` to the corresponding `ODataGrid`/`ODataGridPro` component, add the `url` property, and remove any unsupported properties. @@ -104,7 +120,7 @@ _* = not applicable to collection fields_ | `collectionFields` | `ODataGridColDef` | | Column definitions for the subfields of the collection. Any properties marked with * are not supported. | | `datePickerProps` | [`DatePickerProps`](https://mui.com/api/date-picker/) | | Props to pass to the `DatePicker` component for columns with type `date` | | `dateTimePickerProps` | [`DateTimePickerProps`](https://mui.com/api/date-time-picker/) | | Props to pass to the `DateTimePicker` component for columns with type `datetime` | -| `expand` | `Expand` | | Include related entities using the `$expand` clause. | +| `expand` | `Expand \| Expand[]` | | Include related entities using the `$expand` clause. | | `filterable` | `boolean` | | Hides the field and does not allow filtering in the FilterBuilder when set to `false`. | | `filterField` | `string` | | If the field name is different to the field which should be used for filtering, provide the field for filtering here. See also: `filterType`. | | `filterOnly` | `boolean` | `false` | Set to true if the field is for filtering only and cannot be displayed as a column in the datagrid. | diff --git a/packages/base/components/ODataGridBase.tsx b/packages/base/components/ODataGridBase.tsx index de7b56e..30d815a 100644 --- a/packages/base/components/ODataGridBase.tsx +++ b/packages/base/components/ODataGridBase.tsx @@ -5,7 +5,7 @@ import { ResponsiveValues, useResponsive } from "../hooks"; import FilterBuilder from "../FilterBuilder/components/FilterBuilder"; -import { ODataResponse, ODataGridBaseProps, IGridSortModel, IGridProps, IGridRowModel, ColumnVisibilityModel } from "../types"; +import { ODataResponse, ODataGridBaseProps, IGridSortModel, IGridProps, IGridRowModel, ColumnVisibilityModel, Expand } from "../types"; import { ExpandToQuery, Flatten, GetPageNumber, GetPageSizeOrDefault } from "../utils"; @@ -75,7 +75,8 @@ const ODataGridBase = visibleColumns.includes(c.field) && c.expand) - .map(c => c.expand!); + .map(c => c.expand!) + .reduce((a: Expand[], b) => Array.isArray(b) ? a.concat(b) : [...a, b], []); const query = new URLSearchParams(); query.append("$select", Array.from(fields).join(",")); diff --git a/packages/base/types.ts b/packages/base/types.ts index edf683c..b7ac486 100644 --- a/packages/base/types.ts +++ b/packages/base/types.ts @@ -49,7 +49,7 @@ type OmitGridProps = Omit = Omit & FieldDef & { select?: string, - expand?: Expand, + expand?: Expand | Expand[], hide?: ResponsiveValues | boolean, filterOnly?: boolean } diff --git a/packages/o-data-grid-pro/README.md b/packages/o-data-grid-pro/README.md index 320beec..b2a2516 100644 --- a/packages/o-data-grid-pro/README.md +++ b/packages/o-data-grid-pro/README.md @@ -1,4 +1,9 @@ # ODataGrid + +[![NPM Version](https://img.shields.io/npm/v/o-data-grid.svg)](https://www.npmjs.com/package/o-data-grid) +[![NPM Downloads](https://img.shields.io/npm/dt/o-data-grid.svg)](https://www.npmjs.com/package/o-data-grid) +[![NPM Bundle Size](https://img.shields.io/bundlephobia/minzip/o-data-grid)](https://www.npmjs.com/package/o-data-grid) + ODataGrid is an extension to the [MUI DataGrid](https://github.com/mui-org/material-ui-x) React component which implements features such as sorting, pagination, column selection, and filtering using the [OData Standard](https://www.odata.org/). This allows you to quickly create a powerful interface for browsing data with minimal back-end code. ![ODataGrid in action](https://raw.githubusercontent.com/jamerst/o-data-grid/main/images/o-data-grid.png) @@ -22,6 +27,17 @@ ODataGrid is still in the fairly early stages of development. I'm not aware of a Please report any issues that you find, and feel free to make feature requests. This will help to make ODataGrid better. +## Installation +ODataGrid can be installed using the appropriate npm package ([`o-data-grid`](https://www.npmjs.com/package/o-data-grid) or [`o-data-grid-pro`](https://www.npmjs.com/package/o-data-grid-pro)). + +The following material-ui packages must also be installed. I recommend using the latest versions where possible, but they must be v5.x.x. **These are peer dependencies so won't be installed automatically.** +- `@mui/system` +- `@mui/material` +- `@mui/x-date-pickers` +- `@mui/x-data-grid` for `o-data-grid` +- `@mui/x-data-grid-pro` for `o-data-grid-pro` +- `@mui/icons-material` + ## Usage Usage is very similar to the regular DataGrid. For the most basic scenario simply change the `DataGrid`/`DataGridPro` to the corresponding `ODataGrid`/`ODataGridPro` component, add the `url` property, and remove any unsupported properties. @@ -104,7 +120,7 @@ _* = not applicable to collection fields_ | `collectionFields` | `ODataGridColDef` | | Column definitions for the subfields of the collection. Any properties marked with * are not supported. | | `datePickerProps` | [`DatePickerProps`](https://mui.com/api/date-picker/) | | Props to pass to the `DatePicker` component for columns with type `date` | | `dateTimePickerProps` | [`DateTimePickerProps`](https://mui.com/api/date-time-picker/) | | Props to pass to the `DateTimePicker` component for columns with type `datetime` | -| `expand` | `Expand` | | Include related entities using the `$expand` clause. | +| `expand` | `Expand \| Expand[]` | | Include related entities using the `$expand` clause. | | `filterable` | `boolean` | | Hides the field and does not allow filtering in the FilterBuilder when set to `false`. | | `filterField` | `string` | | If the field name is different to the field which should be used for filtering, provide the field for filtering here. See also: `filterType`. | | `filterOnly` | `boolean` | `false` | Set to true if the field is for filtering only and cannot be displayed as a column in the datagrid. | diff --git a/packages/o-data-grid-pro/package.json b/packages/o-data-grid-pro/package.json index b28dd3b..7dc1119 100644 --- a/packages/o-data-grid-pro/package.json +++ b/packages/o-data-grid-pro/package.json @@ -1,6 +1,6 @@ { "name": "o-data-grid-pro", - "version": "1.2.0", + "version": "1.2.1", "description": "A React Data Grid and Query Builder for OData APIs. Based on the Material-UI DataGridPro.", "main": "build/o-data-grid-pro-cjs.js", "module": "build/o-data-grid-pro-esm.js", diff --git a/packages/o-data-grid/README.md b/packages/o-data-grid/README.md index 320beec..b2a2516 100644 --- a/packages/o-data-grid/README.md +++ b/packages/o-data-grid/README.md @@ -1,4 +1,9 @@ # ODataGrid + +[![NPM Version](https://img.shields.io/npm/v/o-data-grid.svg)](https://www.npmjs.com/package/o-data-grid) +[![NPM Downloads](https://img.shields.io/npm/dt/o-data-grid.svg)](https://www.npmjs.com/package/o-data-grid) +[![NPM Bundle Size](https://img.shields.io/bundlephobia/minzip/o-data-grid)](https://www.npmjs.com/package/o-data-grid) + ODataGrid is an extension to the [MUI DataGrid](https://github.com/mui-org/material-ui-x) React component which implements features such as sorting, pagination, column selection, and filtering using the [OData Standard](https://www.odata.org/). This allows you to quickly create a powerful interface for browsing data with minimal back-end code. ![ODataGrid in action](https://raw.githubusercontent.com/jamerst/o-data-grid/main/images/o-data-grid.png) @@ -22,6 +27,17 @@ ODataGrid is still in the fairly early stages of development. I'm not aware of a Please report any issues that you find, and feel free to make feature requests. This will help to make ODataGrid better. +## Installation +ODataGrid can be installed using the appropriate npm package ([`o-data-grid`](https://www.npmjs.com/package/o-data-grid) or [`o-data-grid-pro`](https://www.npmjs.com/package/o-data-grid-pro)). + +The following material-ui packages must also be installed. I recommend using the latest versions where possible, but they must be v5.x.x. **These are peer dependencies so won't be installed automatically.** +- `@mui/system` +- `@mui/material` +- `@mui/x-date-pickers` +- `@mui/x-data-grid` for `o-data-grid` +- `@mui/x-data-grid-pro` for `o-data-grid-pro` +- `@mui/icons-material` + ## Usage Usage is very similar to the regular DataGrid. For the most basic scenario simply change the `DataGrid`/`DataGridPro` to the corresponding `ODataGrid`/`ODataGridPro` component, add the `url` property, and remove any unsupported properties. @@ -104,7 +120,7 @@ _* = not applicable to collection fields_ | `collectionFields` | `ODataGridColDef` | | Column definitions for the subfields of the collection. Any properties marked with * are not supported. | | `datePickerProps` | [`DatePickerProps`](https://mui.com/api/date-picker/) | | Props to pass to the `DatePicker` component for columns with type `date` | | `dateTimePickerProps` | [`DateTimePickerProps`](https://mui.com/api/date-time-picker/) | | Props to pass to the `DateTimePicker` component for columns with type `datetime` | -| `expand` | `Expand` | | Include related entities using the `$expand` clause. | +| `expand` | `Expand \| Expand[]` | | Include related entities using the `$expand` clause. | | `filterable` | `boolean` | | Hides the field and does not allow filtering in the FilterBuilder when set to `false`. | | `filterField` | `string` | | If the field name is different to the field which should be used for filtering, provide the field for filtering here. See also: `filterType`. | | `filterOnly` | `boolean` | `false` | Set to true if the field is for filtering only and cannot be displayed as a column in the datagrid. | diff --git a/packages/o-data-grid/package.json b/packages/o-data-grid/package.json index d2dc15f..10ca189 100644 --- a/packages/o-data-grid/package.json +++ b/packages/o-data-grid/package.json @@ -1,6 +1,6 @@ { "name": "o-data-grid", - "version": "1.2.0", + "version": "1.2.1", "description": "A React Data Grid and Query Builder for OData APIs. Based on the Material-UI DataGrid.", "main": "build/o-data-grid-cjs.js", "module": "build/o-data-grid-esm.js",