devexpress/devextreme-reactive

Business React components for Bootstrap and Material-UI

devextreme-reactive's Issues

How to replace the default require id

Hello,
I came to know that each data object should have a id property which is given to rows props. Nevertheless, there's a articleId property in my data objects but not a id. Except resolving it by adding a id property on purpose, how may I make point the required id to the my articleId property ?

Thx, guys

Border widths are incorrect within a virtual table

The 'border-collapse' style is not applied to a virtual table's cells.

Resizing column width

Hi,
Is it possible to adjust the column width of the grid? One of the column values in my application are GUIDs, and at the moment, due to many columns, part of the guid/column field is hidden/clipped.

Kind regards,
Morten

Getting started with Firebase

Does anyone have any suggestions or examples I could follow for integrating this with a Firebase database?

I know each database can be unique but I'm a little stuck at where to start.

Grid - There is no simple way to handle row click

Provide an API for handling row click.

Implement Material UI templates

Implement React Grid templates based on the Material UI component library.

Multi-value filtering a column

Not sure if this is already possible but if so I cannot figure out how to do it (other than writing a custom filtering function) but if I want to specify multiple values for filtering a column so for example, if I want to filter a Status column by rows that are either done or closed. I would expect something like this to work but it does not:

const filters = [{ columnName: 'status', value: 'done' }, { columnName: 'status', value: 'closed'}]

Alternatively and perhaps more intuitively would be to pass a list of filtering values e.g:

const filters = [{ columnName: 'status', value: ['done', 'closed'] }]

Additionally but related would be the option to specify simple arithmetics (although this could be done in a custom filtering function), i.e.

const filters = [{ columnName: 'status', value: (x) => return x > 3 }]

The last thing is more advanced and not as important, but being able to filter a column by multiple values should be implemented into the API in my opinion and should not require a custom filtering function

TableEditColumn position

Hi,

is it possible to put a TableEditColumn at the end the of grid instead of the begining ?

Custom cell templating "Element type is invalid" error

Hey guys,

I tried to implement your templating demo/example found in https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-demos/src/bootstrap3/featured-uncontrolled-mode/demo.jsx

You have a template for a progressbarcell and a highlighted cell which I tried to copy and adapt to my needs. I started with a very simple template to try it out which is basically the same as your highlighted cell:

import React from 'react';
import PropTypes from 'prop-types';

const getStatus = (value) => {
  switch (value) {
    case -1:
      return 'OFF';
    case 0:
      return 'OFF';
    case 1:
      return 'GOOD';
    case 2:
      return 'BAD';
    default:
      return 'N/A';
  }
};

export const VarStatusCell = ({ align, value, style }) => (
  <td
    style={{
      textAlign: align,
      ...style,
    }}
  >
    ${getStatus(value)}
  </td>
);
VarStatusCell.propTypes = {
  align: PropTypes.string.isRequired,
  value: PropTypes.number.isRequired,
  style: PropTypes.object,
};
VarStatusCell.defaultProps = {
  style: {},
  align: 'left',
};

and in my table component I have the following tableview configuration:

                  <DragDropContext />
                  <TableView
                    tableCellTemplate={({ row, column, style }) => {
                      if (column.name === 'status') {
                        return (
                          <VarStatusCell value={row.status} style={style} />
                        );
                      }
                      return null;
                    }}
                    allowColumnReordering
                  />
                  <TableHeaderRow allowDragging />

Pretty much copied one to one from your example, but this breaks my code with the following error

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TemplateConnector`.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:74)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

I thought maybe it had to do with the "return undefined" for columns that don't have a template but changing that to null or removing it hasn't fixed the error.

Any ideas what this could be? Has the templating syntax changed since the demo was made?

How to preload the row data for each input field ?

Hello, folks,
I've trying to preload the data for every field in the row while selecting a item Code / Id, for instance, with such data given to row props :

[
    {
        "id": "0001",
        "firstName": "Foo",
        "lastName": "Bar",
        ...
    },
    {
        "id": "0002",
        "firstName": "Hello",
        "lastName": "World",
        ...
    }
]

the fields firstName , lastName should be automatically preloaded to "Foo" and "Bar" while we select id = "0001".

Appreciate your helps :)

Material-UI Uncaught TypeError: Object(...) is not a function

Hi,

I'm experiencing this error whenever I try to import the devextreme-react-material-ui package.

I've tried my implementation with the react-bootstrap version and the import works fine. It's just whenever I try to use the material-ui version, it does not work.

Uncaught TypeError: Object(...) is not a function
at Object.defineProperty.value (bundle.js:sourcemap:21038)
at webpack_require (bundle.js:sourcemap:677)
at fn (bundle.js:sourcemap:88)
at Object. (bundle.js:sourcemap:15731)
at Object. (bundle.js:sourcemap:15833)
at webpack_require (bundle.js:sourcemap:677)
at fn (bundle.js:sourcemap:88)
at Object. (bundle.js:sourcemap:15061)
at Object.defineProperty.value (bundle.js:sourcemap:15146)
at webpack_require (bundle.js:sourcemap:677)

I'm using
React-dom v16 beta 5
Material UI v1 beta 7

Table column reordering is not working with Virtual Table

Currently, it's impossible to drop a dragged column on a Virtual Table. It does nothing.

Persist Column Reordering

Hey guys,

just a suggestion for the Column Reordering plugin. In the DevExtreme HTML5 JS version of the grid it is possible to persist the user's chosen column order and other settings by storing it in something like a Cookie or in LocalStorage.

Any thoughts on getting this into the React version too?

In theory it would just be to save the Column Reorder state in somekind of store (i.e. a Redux store) and pass that to the plugin, but would like to see it implemented by you guys since you guys rock.

Thanks and keep up the good work!

TableFilterRow doesn't reset a column filter when clearing the filter editor value

When you fill in a filter editor, its value is set to the filtering state. Once you clear the filter editor text input, its value is not reset, it's just set to an empty value.

A header row is not shown correctly within a virtual table view in Edge and IE

A header row is not shown or is rendered outside DataGrid.
 
The following screenshot demonstrates the issue:

The filters overlap the records

When you scroll to the last line, the filters overlap the records

.

Format column

I have two requests really, I've got a datetime field I would like to display in a user friendly manor, currently shows as "2017-06-21T14:30:04.7403971+01:00". Should I format this in my controller before sending the json to the client page?

And the other is I have a sub-class/sub-document in my json, I tried pushing it into the grid as a field, but it doesn't like it. It doesn't give an error, but it also doesn't display the grid.

Provide the capability to resize columns

Provide the capability to resize columns (similar to allowColumnResizing).

Virtual Table Height

Is there a way to set the height for the container div of virtual table component via its props, instead of its fixed 530px height ?

React Grid Material UI

How can I install @devexpress/dx-react-grid-material-ui ? As far as I know, it isn't exist on npm

Custom CSS Classes on rendered table

Hey guys,

sorry if this is obvious and I just missed it but I've been looking through the Docs and Demos and unable to find a place where I can declare custom CSS classes that the grid should add to the table HTML element it creates.

This is relevant in for example bootstrap where you may want to use some of the bootstrap built-in table classes such as table-bordered table-striped table-condensed etc.

I tried adding them using the className react decorator on TableView or Grid elements without success.

Any ideas?

onTouchTap in Material-UI deprecated

yes, what i said, not works for material-ui beta5 or higher

Paging allowedPageSizes showing buttons but nothing happening when you press them

This is issue is probably down to how I'm implementing the grid, but the buttons to alter the amount of rows visible in the pages don't do anything.

I'm using typescript with tsx files, which is from the template I used to create the project from yeoman.

for the render i'm doing:

public render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.state.view === "Export"
                ? ParagonAdmin.renderExportsTable(this.state.exportData)
                : this.state.view === "Teams"
                    ? ParagonAdmin.renderTeamTable(this.state.teamData)
                    : this.state.view === "Jobs"
                        ? ParagonAdmin.renderJobsTable(this.state.jobData)
                        : <p>Error</p>;

        return <div>
            <div className="navigation-contextual navigation-main">
                <ul>
                    <li><a className="btn menu-btn" >Teams</a></li>
                    <li><a className="btn menu-btn" >File Extract Log</a></li>
                    <li><a className="btn menu-btn" >Global Address</a></li>
                    <li><a className="btn menu-btn" >Reg Ex Report</a></li>
                </ul>
            </div>
            <h1>Administration</h1>
            {contents}
        </div>;
    }

and the function is:

`private static renderJobsTable(dataJobs: JobsData[]) {
        const pagesizes = [5, 10, 15, 0];
        return <div>
            <Grid rows={dataJobs} columns={[{ name: 'JcId', title: 'Id' }, { name: 'JmCustref1', title: 'Customer Reference' }, { name: 'JcDescription', title: 'Description' }]}>
                <FilteringState defaultFilters={[]} />
                <LocalFiltering />
                <SortingState />
                <LocalSorting />
                <PagingState
                    defaultCurrentPage={0}
                    pageSize={25}
                />
                <LocalPaging />
                <TableView />
                <TableHeaderRow allowSorting />
                <PagingPanel />
                <TableFilterRow />
            </Grid>
        </div>;
    }`

Make default Devextreme skins available

Bootstrap and Material UI are all good and well, but I'm very much a fan of the simple Light and Dark (as well as compact) DevExtreme themes that ship with the standard jQuery etc. version.

Can we get TableViews implementing those themes? Or are they already there and I've missed them?

Gracias,

React DataGrid does not work in IE11

The following error is thrown:

Object doesn't support property or method 'findIndex'

Paging; Next and Previous buttons

I can't find how to turn the next and previous buttons on in the paging panel.

Have they been missed out of this release?

Feedback; Can't wait for the full release!

This grid is the best I've seen so far. It is early in the development and their are bits missing, but it's still a good implementation. I can't wait for the small issues that remain to be resolved and a full version released!

Combining sorting and paging

Is there possible combine features: sorting and paging on one component?

Example with Context Menu

This is kinda related to #284 but it would be great to get an example of an implementation of a react native context menu (similar to the ones in other DevExpress grid implementations) but natively in react.

I.e. something like when you right click a row in the grid a toggle is fired and a custom dropdown menu is rendered on the row at the position of the mouse cursor.

I think this would be a pretty common thing that people would be interested in, I know I personally would be!

Thanks,

Column Pinning

Are there any plans adding in a column pinning feature similar to the ui-grid?
http://ui-grid.info/docs/#/tutorial/203_pinning

Older version of material-ui

Hi! Can somebody tell me if is it possible for grid to work and if yes how with older version of material-ui e.g. v0.18.7?

Using nested keys for column definition

Having a data structure or row structure like this:
row = [{id : 1, title: 'example 1', user: {name: "user 1"}}, {id : 2, title: 'example 2', user: {name: "user 2"}}]
i would suspect that with the following column definition:
this.state = { columns: [ { name: "id", title: "ID" }, { name: "title", title: "Title" }, { name: "user.name", title: "User name" } ] };
the grid is well defined and row[i].user.name is used as the value.
Is there a different syntax to define this or are rows objects always expected to be flat?

Use drag'n'drop for grouping

Add the capability to group/ungroup rows by dragging and dropping a column header from/to the Grid group panel (similar to this demo).

Implement ColumnChooser

As far as I can see there is no columnChoser implemented yet - is this planned?

Data service source code

I think it would be a good idea to show the source code for web service used in the Remote Data sample https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems

Semantic UI theme

Great work first of all! React community is definitely in need of a fully functional data grid like this.

We are currently (and I guess many other people as well) are using Semantic UI react components so it would be great if those styles are added as well (we can help for this!).

Otherwise, I think that bootstrap/material and semantic css will interfere with each other and we will have trouble using this beautiful data grid.

Problem w/ editing when using VirtualTableView

When i click edit on a row when using VirtualTableView the edit column seems to lose its width and all other columns are pushed to the left of the table, my component construction seems to work fine when using regular TableView though.

dx-react-grid-material-ui is not compatible with the latest version of material-ui

the latest version of material-ui has removed createStyleSheet() method.

Setting style settings on Table Column Header

Hey guys,

from your demos and docs I have figured out how to apply templates to a Table cell in a row, but for my project I need to set some style attributes on some of the Table header elements.

For example, I need to set a max-width of 25px on the first Table Header element.

I know how to do this with a workaround adding it after the table has been rendered but is there an api for doing it? Like passing a react style object to the list of columns. If not, there really should be ;)

Thanks.

MS Office React Fabric UI theme

Introduce a data grid for React Fabric by providing Fabric UI look and feel for the DevExtreme React Grid.

Publish a new version of dx-react-grid-material-ui

Hello,

I'm trying dx-react-grid-material-ui and I was wondering if you could publish a new version of the package with the fix for using [email protected] ?

Thank you very much!

Parsing error: Unexpected token on simple grid example

Hi! This is probably more a setup issue than a Devexpress react grid issue, but maybe its possible to be pointed in a direction.
In our react app I have followed the devexpress react grid documentation, and installed:

npm i --save @devexpress/dx-react-core @devexpress/dx-react-grid
npm i --save @devexpress/dx-react-grid-bootstrap3

and copied in the simple grid starting code, but I get a parsing error: Unexpected Token on the third '}' in the rows line: rows={[{ id: 0, ... }, ...]}

Sorry if this is very vague, it just does not say much about this type of setup issues in the the documentation. The code is basically the same as the example, but posted a screenshot of the parsing error for easier viewing.

Any tips is appreciated!
Morten

It is not possible to cancel column grouping in FireFox and IE

If you try to click on the close icon inside the groping panel item, the grouping state for the column will not be changed.

It is not possible to cancel sorting for specific columns

If you click a column header with the Ctrl key, the sorting state for the column will not be changed.

Feedback and Usecases: really good job guys!

Hey all,

I just wanted to let you guys know that you're doing a great job with the DevExtreme react grid and I'm really looking forward to the upcoming components!

At my work I build webapplications for monitoring and interacting with industrial equipment and in late 2016 we started moving all of our applications to ReactJS which sadly meant: no Devexpress. So imagine our hype when you guys announced the CTP of the grid, and we've done some extensive testing already.

There is one use-case that's central to our applications that I'd like to highlight for you guys, and that is live updating the grid or indeed binding it to dynamic/changing data. One of the key advantages of react in my opinion is how good it is at seamlessly updating the DOM and with component states you can really build some powerful real-time data applications. So we will mainly be interested in using the react grid for data that will update on a set relatively frequent interval (i.e. every 15 seconds) after which the grid will need to be redrawn with the new data. Since we're using react, we will likely be using something like Redux to manage the actual fetching, storing and reducing data so the grid will just have its' state updated from the corresponding reducer.

Have you guys done some testing on how the grid handles "live" data and how well it redraws with pagination etc?

Also we are hoping you will be supporting the same awesome filtering, column choosing and grouping functionalities that you have in the DevExtreme grid.

Keep up the awesome work!

React Grid Boolean data

How can I display boolean data? And I want to edit this cell. Can I add cell template for one column?

Run demos locally does not work

Followed instructions at :
https://github.com/DevExpress/devextreme-reactive/tree/master/packages/dx-react-demos

Getting many errors such as :
Module not found: Error: Can't resolve '@devexpress/dx-react-grid-bootstrap3' in 'C:\React\devextreme-reactive-master\packages\dx-react-demos\src\bootstrap3\featured'

Fixed Header and Left / Right Column

Somewhat related to #293 but it's always so handy to have the ability to fix the tableheader during scrolling and fix a column to either the left or the right.

It's a simple CSS functionality but it's really powerful and often gives problems so would appreciate it being built-in functionality.

Just an idea ;)

Column width is changing on scrolling a virtual table the first time

Steps to reproduce:

1. Initialize DataGrid with empty rows;
2. Set new rows, at least 100. It should force the virtual table to render the vertical scrollbar;
3. Scroll the virtual table.

Provide a starter kit / boilerplate for getting started with Devextreme reactive

Hey guys,

Aside from the demos, I personally would love to see a basic starter kit or boilerplate that quickly allows people to get started with DevExtreme Reactive and also comes equipped with some industry standard tools such as webpack with HMR.

For example, a base template sporting: React, Possibly Redux, Webpack (HMR), DevExtreme Reactive with a choice of either Bootstrap or Material-UI.

Furthermore for a backend you could provide a simple ASP.NET Core WebAPI backend since its still cross-platform and open source and I think a lot of DevExpress users are on a Microsoft stack.

If you do provide a backend some build-tools for integrating Webpack compile and .NET Core into one would be awesome.

Anyway, just an idea for something I'd personally love to see.

Thanks and keep up the amazing work!