For my use case, I need to be able to add menu options in the column headers.

It should be fairly trivial to add this - I believe this is the place that needs updating:

https://github.com/inovua/reactdatagrid/blob/master/community-edition/plugins/menus/useMenus/renderColumnContextMenu.js

Trying to use pagination and filtering together, it doesn't work as you can see on this screen the total count and the number of pages are false.

@inovua/reactdatagrid-community

• what edition are you using - enterprise (paying customer)

• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

What you did:
implemented a grid with column grouping, groupColumn={true} and sorting:

Then I sorted by the "enlisted" column:

What happened:

As you can see above, russia should be first in order since the value for that row is 3, higher than two (usa).

Reproduction repository:
https://codesandbox.io/s/laughing-euler-l8vhi?file=/src/App.js

Problem description:
This looks like a bug. Our users are trying to sort columns when there are other columns grouped, and they don't understand why it doesn't work properly.

Suggested solution:
in "group mode" (when there are other columns grouped) sorting a column should also sort the grid by group level. In my second screenshot for example, russia would appear above usa.

in code, I'd do something like this (following the example in the sandbox posted above):

const columns = [
{ ..., sortGroupBy: ({ data }) => data.array.reduce((acc, item) => acc + item, 0) }
]

data would be the same as in columns.render.

That's the simplest most intuitive API I could think of. I'm sure there are other ways to implement this, but ATM it looks and behaves like a bug, and it's a must for us and our clients. Thanks.

How is it possible to even change skip value from your example, when there is no callback prop for onscroll/livepagination page change?

• what edition are you using - community
• version 4.0.22

Relevant code or config

What you did:
applied transform: "scale(0.8)" via grid style property

What happened:
virtual row list shrinked, not filling the entire component height anymore as can be seen in the codesandbox below

Reproduction repository:
https://codesandbox.io/s/pensive-wu-87czv

Problem description:

Component should adapt to the scaling properly.

Context: I came across this issue when integrating the component into Powerapps canvas app via PCF framework - while having Powerapps "Scale to fit" option ON, which is applying the scaling.

Suggested solution:
fix the virtual list CSS?

• what edition are you using - community
• version for @inovua/reactdatagrid-community version 4.0.11

What you did:
On a list with "checkboxColumn":
I clicked on "check all". Then all item were checked.
I clicked on "Clear Check All". Then nothing happen.

What happened:
All the item were supposed to be unchecked but nothing happen.

Reproduction repository:
This can be reproduce with the exemple at "Multiple selection with checkbox column". On your docs page (https://reactdatagrid.io/docs/row-selection).

But it works with the exemple "Multiple checkbox section. DataSource + grouping + sorting + pagination - all performed remotely"

Problem description:
Usually when an item is checked, the icon of the header should change to

But it doesn't.

Also when all item are checked the icon should be

But it doesn't.

Suggested solution:
Fix it.

community 4.0.22

What you did:
set up grid with checkbox column and pagination, then clicked on "select/deselect all" toggle checkbox

What happened/problem description:
grid shows only items of the current page as selected (onSelectionChange also returns only those items)
Expected: show/return all selected rows upon "select all" + this should be only the filtered ones (from my tests, the "Select all" ignores current filter).

Reproduction repository:
https://codesandbox.io/s/inovua-grid-community-selall-bug-9bjgo
STEPS: either select all, or filter and then select all, and you will always get only the current page rows

Suggested solution:

1. "Select all" should take into account other data pages and the current filter.
2. grid API should provide a way to get the array of filtered rows.

• what edition are you using - community
• version for @inovua/reactdatagrid-community - 4.0.14

What you did: Copied example from: https://reactdatagrid.io/docs/stacking-columns#stacking-columns

What happened: Top column row with group names is not shown. Grid columns appear like they would using an unstacked column headings grid.

• what edition are you using - community
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

Relevant code or config

        key="clearButton"
        className={join(
          `${rootClassName}__clear-button-wrapper`,
          !showButton && `${rootClassName}__clear-button-wrapper--hidden`
        )}
      >
        {this.renderClearButton({
          clearButtonColor,
          clearButtonStyle,
          clearButtonSize,
          ...getClearButtonClassNames(props),
        })}
      </div>

What you did:

My data grid runs in tabs which are wrapped in a form.

What happened:

When I type something in the filter text box and then press the clear button it bubbles up to the form and submits it.

Problem description:

Button clicks should not be bubbling and submitting parent elements.

Suggested solution:

Add a stop propagation or at minimum designate the button as type = button so it doesn't get interpreted as a submit button.

There is an issue when the table has greater than 14 columns and If scrolling all the way to the left (end of table/last column) and also paging to the last page.
If the last page has less than rows of default limit rows and then paging back the table cells lost their position and the position is back only when scrolling a side.

I have checked into the developer tools those cells style left property is set to 0.

Please look into the attachments

• what edition are you using - community
• version for @inovua/reactdatagrid-community - 4.0.29

Relevant code or config

export const DateField = () => {

    return (
        <DateInput theme={"default-dark"} dateFormat="DD/MM/YY HH:mm:ss" showClock={true}>
            <Calendar okButtonText="Select..." cancelButtonText="Close..." showClock={true}/>
        </DateInput>
    );
}

What you did:
Tried DateInput example with showClock true.

What happened:
Picker focus lost when clicked on clock input.

Reproduction repository:
https://codesandbox.io/s/reactdatagrid-dateinput-h0r5i?file=/src/styles.css

Problem description:
DateInput with clock loses focus on clock input click.

Suggested solution:
DateInput controls this.pickerView.isTimeInputFocused (MonthView) but this method implemented in picker's itself (Calendar).

this.pickerView should be replaced with this.picker in the following methods in Calendar/src/DateInput/index.js:
onFieldBlur(event),
isTimeInputFocused()

Using the latest Chrome version 89.0.4389.90 on Mac or windows, the Row selection/multiselection doesn't work anymore.
The workaround is to use the Checkbox https://reactdatagrid.io/docs/row-selection#multiple-selection-with-checkbox-column but it is not user friendly anymore

Same table worked with older version of chrome or other browsers.

• what edition are you using - community
• version for @inovua/reactdatagrid-community - 4.0.27

Relevant code or config
Reproducible also in the demo page below
https://reactdatagrid.io/docs/row-selection#multiple-row-selection

import React, { useState, useCallback } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 550 };

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 60, type: 'number' },
  { name: 'name', header: 'Name', defaultFlex: 1 },
  { name: 'country', header: 'Country', defaultFlex: 1,
    render: ({ value })=> flags[value]? flags[value] : value
  },
  { name: 'city', header: 'City', defaultFlex: 1 },
  { name: 'age', header: 'Age', defaultFlex: 1, type: 'number' }
];

const App = () => {
  const [selected, setSelected] = useState(null);

  const onSelectionChange = useCallback(({ selected: selectedMap, data }) => {
    const newSelected = Object.keys(selectedMap).map(id => id * 1)

    setSelected(newSelected);
  }, [])

  return (
    <div>
      <h3>Multiple row selection - uncontrolled</h3>
      <ReactDataGrid
        idProperty="id"
        enableSelection
        multiSelect
        onSelectionChange={onSelectionChange}
        style={gridStyle}
        columns={columns}
        dataSource={people}
      />
      <p>
        Selected rows: {selected == null ? 'none' : JSON.stringify(selected)}.
      </p>
    </div>
  );
}

export default () => <App />

What you did:
Trying to click on the row itself. Expecting that the row is marked as selected

What happened:
Clicked row is not marked as selected and it is not displayed in the output "Selected Rows: none"

Problem description:

The only way to select a row is using checkbox, which become painful for multiple rows which in the past can be selected holding the Shift key

• what edition are you using - community
• version for @inovua/reactdatagrid-community - 4.0.20

Relevant code or config

What you did:
Selected both "YES" and "NO" filters in Enlisted column.
Clicked clear button inside "NO" tag.

What happened:
Nothing changed.

Reproduction repository:

https://codesandbox.io/s/reactdatagrid-12viw

Problem description:

id values of 0,false,null etc. can not be removed with tag's clear button when multi selection enabled.

Suggested solution:

In Combobox.js -> updateValueMap function
line can be changed:
id: this.getIdProperty(item) || item --> id: this.getIdProperty(item),

• what edition are you using - community (But the problem seems to happen on both version)
• version for both

Relevant code or config

What you did:
Just click on a list with the option enableSelection enabled

What happened:
The border is always applied on the last clicked row but the row background is not always applied

Reproduction repository:
You can easily reproduce the problem with example provided on the page https://reactdatagrid.io/docs/row-selection.
The probleme is also happening in the community version.

Problem description:
onSelectionChange callback is not always called. This causes that the last clicked cell is not always selected.

Suggested solution:
The selected row style must be applied.

• what edition are you using - community
• version for @inovua/reactdatagrid-community 4.0.11

What you did:
On a datagrid with checkboxColumn enabled.
Click on the row, then the item is selected.
Click on another row, the item is selected but the first item is unchecked.
Click on the current checked row, then nothing happen.

What happened:

Reproduction repository:
This can be reproduce with the exemple at "Multiple selection with checkbox column". On your docs page (https://reactdatagrid.io/docs/row-selection).

Problem description:
The behavior is not what we are used to see.
But if we click directly on the checkbox it works correctly.

Loosing all checked row but clicking on another row can be disturbing.

But we can we can override the behavior with selected and onSelectionChange.

Suggested solution:

• Keep check status when you click on another item.
• Remove check status when you click on the row of an item checked

❓ Questions:
I try to create a custom search with remote data.
How do I re-render the grid to pull data from the server?

Thanks,

Hello, after I pass in undefined as a value of selected prop, selecting a row no longer works. null works fine. Considering that the default value for this prop is undefined per doc, I would assume that it should also work.

Below is a code snippet using code editor on https://reactdatagrid.io/ and the behavior can be replicated by pressing the button first and then clicking on different rows.

import React, { useState, useCallback } from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 550 }

const columns = [
  { name: 'id', defaultWidth: 60, header: 'Id', defaultVisible: false },
  { name: 'name', defaultFlex: 1, header: 'Name' },
  { name: 'country', defaultFlex: 1, header: 'Country',
    render: ({ value }) => flags[value] ? flags[value] : value
  },
  { name: 'age', type: 'number', defaultFlex: 1, header: 'Age' },
  { name: 'email', header: 'Email', defaultFlex: 1 }
]

const App = () => {
  const [selected, setSelected] = useState('1');

  const onSelectionChange = useCallback(({ selected }) => {
    console.log('selected', selected);
    setSelected(selected)
  }, [])

  return (
    <div>
      <p>
        Selected rows: {selected == undefined ? 'none' : selected}.
      </p>
      <button onClick={() => { setSelected(undefined) }}>change selection</button>
      <ReactDataGrid
        idProperty="id"
        selected={selected}
        onSelectionChange={onSelectionChange}
        style={gridStyle}
        columns={columns}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

What you did:
called collapseAllGroups and then opened a top level group

What happened:
All children groups were opened as well.

Reproduction repository:
https://codesandbox.io/s/throbbing-fire-jjc6g?file=/src/App.js

Problem description:
This only happens when calling collapseAllGroups and then drilling down. Closing groups manually and then reopening them does not produce this behavior.

Makes the grid harder to navigate. when I drill down a group, I'm only interested in the next level of drill, not all the way down for all the subgroups. We use it for initial display. We have customers with 8 levels of drill down, and they start the view with only seeing the top level group, click one to expand, and bam, all the way down to level 8.

Suggested solution:
whatever happens behind the scenes when manually closing all groups, make the same happen when calling collapseAllGroups.

• what edition are you using - community
• version 4.0.22

What you did: implemented a grid in rtl mode
What happened: when we have more then 14 columns - not displayed all cells data

Edition `@inovua/reactdatagrid-community

Relevant code or config

just take an example with a date filter column

What you did:
Put the date column at the end of the grid
The grid fill the body space.

What happened:

The calendar is hidden

• what edition are you using - enterprise (for evaluation)
• version - 4.0.20

Looking at the demos and docs, it seems like server-side grouping always expects the full data set. Would it be possible to have each group be paginated and potentially use something like the pagination toolbar, infinite scrolling, or a custom "Load More..." button solution in order to load the next page of data for a specific group?

The only way I see of doing this now is by hijacking the summary row and render a load more button or something to fetch the next set of data for that group and then update the datasource accordingly. The only issue with that is that this UX will be contained to a single column and not the entire bottom row which isn't ideal.

We currently have an external button that handles whether the table should show row details and what the details component should be. When the initial value of renderRowDetails is undefined and then gets changed to appropriate render function, expanding a row no longer works. It seems like the computedProps.dataMap doesn't get created since it's undefined.

Reproduction:

1. Click on Toggle Details
2. Try to expand one of the rows
3. You'll see an error in the console

import React, { useState, useCallback } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import Button from '@inovua/reactdatagrid-community/packages/Button'

import people from './people'

const gridStyle = { minHeight: 550 }

const renderRowDetails = ({ data }) => {
  return <div style={{ padding: 20}}>
    <h3>Row details:</h3>
    <table>
      <tbody>
        {Object.keys(data).map((name, i) => {
          return <tr key={i}>
            <td>{name}</td>
            <td>{data[name]}</td>
          </tr>
        })}
      </tbody>
    </table>
  </div>
};

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 80 },
  { name: 'name', header: 'Name', defaultWidth: 120 },
  { name: 'email', header: 'Email', defaultWidth: 120 },
  { name: 'country', header: 'Country', defaultWidth: 120 },
  { name: 'city', header: 'City', defaultWidth: 120 },
  { name: 'age', header: 'Age', type: 'number', defaultWidth: 120 }
];

const App = () => {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div>
      <div>
         <Button onClick={() => setShowDetails(prev => !prev)}>
          Toggle Details
        </Button>
      </div>

      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        rowExpandHeight={400}
        renderRowDetails={showDetails ? renderRowDetails : undefined}
        columns={columns}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

What you did: implemented a grid with grouping in rtl mode

What happened: ui is broken

Reproduction repository:
https://codesandbox.io/s/gracious-sun-khueb

Problem description:
UI is broken

Suggested solution:
Fix it :)

I'm using Redux, Redux Saga and Reactdatagrid version 4.0.22. The problem is dataSource prop only supports an array or a promise/function as value. So when I pass an array of data from Redux to dataSource, how can I set the count (total results) to the component?? both the data and pagination are remote.

Tested with the first example at https://reactdatagrid.io/docs/filtering. Open the source code and add a date format for the column "birthDate":

 {
    name: 'birthDate',
    header: 'Bith date',
    defualtFlex: 1,
    minWidth: 200,
    dateFormat: 'MM-DD-YYYY', // This like breaks the date filter logic.
    filterEditor: DateFilter,
    filterEditorProps: (props, { index }) => {
      return {
        dateFormat: 'MM-DD-YYYY',
        cancelButton: false,
        highlightWeekends: false,
        placeholder: index == 1 ? 'Created date is before...': 'Created date is after...'
      }
    },
    render: ({ value, cellProps }) => {
      return moment(value).format('MM-DD-YYYY')
    }
  },

Then select today's date and choose "before".

Expected behavior: Filter returns all records.
Actual behavior: Filter returns no recods.

Aside from the bug I would like to understand why I need to define a date format at column level when it is already defined via dateEditorProps.

It would also be nice if you can add the column level dateFormat property to the type definitions.

• what edition are you using - community
• version for @inovua/reactdatagrid-community is 4.0.16 -

Error encountered in filterTypes.js (specifically in DateFilters)

Uncaught (in promise) TypeError: window.moment is not a function
    Choo 11
    React 7
    unstable_runWithPriority Choo
    React 4
    unstable_runWithPriority Choo
    React 19
    unstable_runWithPriority Choo
    React 4
    Choo 5
    React 5
[learn more]

Package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@inovua/reactdatagrid-community": "^4.0.16",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "bootstrap": "^4.5.3",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-moment": "^1.1.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "reactstrap": "^8.8.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

I added DateFilter exactly how it is given in the documentation except I used local dataSource instead of remote dataSource. Also, I am using the Community version for my personal project. Component code is given below:

import React from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-community'
import '@inovua/reactdatagrid-community/index.css'

import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter'
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'

const moment = require('moment')
const gridStyle = { minHeight: 600 }

const people = [
    {id: 1, name: "Arpit", age: "22", city: "Lucknow", birthDate: new Date("1990-02-07")},
    {id: 2, name: "Gangwar", age: "21", city: "Bareilly", birthDate: new Date("1996-12-23")},
    {id: 3, name: "Apu", age: "21", city: "Bangalore", birthDate: new Date("1998-01-11")}
]

const filterValue = [
    { name: 'name', operator: 'startsWith', type: 'string', value: '' },
    { name: 'age', operator: 'gte', type: 'number', value: 21 },
    { name: 'city', operator: 'startsWith', type: 'string', value: '' },
    {
      name: 'birthDate',
      operator: 'before',
      type: 'date',
      value: ''
    }
]

const columns = [
    { name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 80, type: 'number' },
    { name: 'name', header: 'Name', defaultFlex: 1 },
    { name: 'age', header: 'Age', defaultFlex: 1, type: 'number', filterEditor: NumberFilter },
    {
      name: 'birthDate',
      header: 'Bith date',
      defualtFlex: 1,
      minWidth: 200,
      filterEditor: DateFilter,
      filterEditorProps: (props, { index }) => {
        // for range and notinrange operators, the index is 1 for the after field
        return {
          dateFormat: 'MM-DD-YYYY',
          cancelButton: false,
          highlightWeekends: false,
          placeholder: index === 1 ? 'Created date is before...': 'Created date is after...'
        }
      },
      render: ({ value, cellProps }) => {
        return moment(value).format('MM-DD-YYYY')
      }
    },
    { name: 'city', header: 'City', defaultFlex: 1 },
]

const ListComponent = () => {
    
    return(
        <div>
            <h3>Grid with default filter value</h3>
        <ReactDataGrid
            idProperty="id"
            style={gridStyle}
            defaultFilterValue={filterValue}
            columns={columns}
            dataSource={people}
        />
        </div>
    )
}

export default ListComponent

What happened:

While using the date filter, If I select a date say "07/12/2020" the following error appears:

This error only occurs while using date filter. Rests are just warnings about using StrictMode in react.

Reproduction repository:

Given below is a codesandbox link with the above mentioned components and the dependencies. Please open this link separately.

https://codesandbox.io/s/modest-pare-v5sum?file=/src/ListComponent.js

Just try and use Date filter and you can see the error.

Problem description:

It says Window.moment is not a function. I am using Ubuntu 20.04. This error completely renders the date filter useless and result in the crash of the application. Date filter also does not filters the dates.

Suggested solution:

I think using moment from moment.js instead of window.moment might work but I am not sure. I am hoping to find a solution so please look into it.

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-enterprise -4.0.22

Relevant code or config
import React from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 550 }

const onRenderRow = ({ data, style }) => {
const { age } = data
if (age > 30) {
if (age > 35) {
style.color = '#ef9a9a'
} else {
style.color = '#7986cb'
}
}
}

const columns = [
{ name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 80 },
{ name: 'name', header: 'Name', defaultFlex: 1 },
{ name: 'email', header: 'Email', defaultFlex: 1 },
{ name: 'country', header: 'Country', defaultFlex: 1,
render: ({ value }) => flags[value] ? flags[value] : value
},
{ name: 'age', header: 'Age', type: 'number', defaultFlex: 1 }
]

const App = () => {
return (

export default () =>

What you did:

What happened:
Not found when we try.

Reproduction repository:

Problem description:

Suggested solution:

• what edition are you using - community
• version 4.0.16

What you did: implemented a grid in rtl mode
What happened: line focus stroke at rtl direction looks wrong

Our data source has a dependency on the table columns since it needs to know what data to request but it also has dependencies on other state that gets update via useMemo and useEffect. When the columns and the data source update at the same time, it crashes the entire app.

Reproduction:

Clicking the "Crash!" button should crash the entire page.

import React, { useState, useCallback } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import Button from '@inovua/reactdatagrid-community/packages/Button'
import DATASET_URL from './DATASET_URL'

const gridStyle = { minHeight: 550, marginTop: 10 }
const empty = () => null;

const columns = [
  { name: 'firstName', header: 'First Name', defaultFlex: 2 },
  { name: 'lastName', header: 'Last Name', defaultFlex: 2 },
  { name: 'email', header: 'Email', defaultFlex: 3 }
];

const App = () => {
  const [tableColumns, setTableColumns] = useState([...columns]);
  const [count, setCount] = useState(0);

  const dataSource = useCallback(async () => ({ data: [], count: 0 }), [
    tableColumns,
    count
  ]);

  const reRender = () => {
    setTableColumns([...columns]);

    setTimeout(() => {
      setCount((count) => count + 1);
      setTableColumns([...columns]);
    }, 0);
  };

  return (
    <div>
      <Button onClick={reRender}>Crash!</Button>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        columns={tableColumns}
        pagination
        livePagination
        limit={10}
        dataSource={dataSource}
      />
    </div>
  );
}

export default () => <App />

When a string or number is passed in as selected, the grid does not select the appropriate row. This works if an object with same value is passed in.

We are using @inovua/reactdatagrid-enterprise and it's v4.0.23.

Reproduction

Below code is a modification of code sample on https://reactdatagrid.io/docs/api-reference#props-selected

import React, { useState, useCallback } from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 550 }

const columns = [
  { name: 'id', defaultWidth: 60, header: 'Id', defaultVisible: false },
  { name: 'name', defaultFlex: 1, header: 'Name' },
  { name: 'country', defaultFlex: 1, header: 'Country',
    render: ({ value }) => flags[value] ? flags[value] : value
  },
  { name: 'age', type: 'number', defaultFlex: 1, header: 'Age' },
  { name: 'email', header: 'Email', defaultFlex: 1 }
]

const App = () => {
  return (
    <div>
      <ReactDataGrid
        idProperty="id"
        multiSelect
        // below will work if passed in { 1: true }
        // also does not work when passed in '1'
        selected={1}
        style={gridStyle}
        columns={columns}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

What you did: printed gridRef?.current.visibleColumns.length when there were 5 columns

What happened: resulted to 4

Reproduction repository:
https://codesandbox.io/s/vibrant-grass-0wvbe?file=/src/App.js:1183-1221

Problem description:
there are two bugs here. the initial column length is 4. when I clear both groupings, it goes to 5, which is correct. Afterwards, if I group by two groupings, and then cancel one, it goes back to 4.

Hey there :)

• what edition are you using - community
• version for @inovua/reactdatagrid-community - 4.0.30

What you did:

Using the example code https://github.com/inovua/reactdatagrid/blob/master/examples/pages/filters/select-null.page.tsx in a fresh CRA installation: npx create-react-app reactdatagrid-example --template typescript. Adding reactdatagrid: yarn add @inovua/reactdatagrid-community. Replaced CRA example code with code from your example.

What happened:

I'm evaluating different data grids to use in my company's react typescript applications. When trying to add filters to columns, I encountered missing type definitions. As of your project readme, there should be full Typescript support.

TypeScript error in /home/me/dev/reactdatagrid-example/src/components/MyDataGrid.tsx(3,26):
Could not find a declaration file for module '@inovua/reactdatagrid-community/SelectFilter'. '/home/me/dev/reactdatagrid-example/node_modules/@inovua/reactdatagrid-community/SelectFilter/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/inovua__reactdatagrid-community` if it exists or add a new declaration (.d.ts) file containing `declare module '@inovua/reactdatagrid-community/SelectFilter';`  TS7016

    1 | import React from "react";
    2 | import ReactDataGrid from "@inovua/reactdatagrid-community";
  > 3 | import SelectFilter from "@inovua/reactdatagrid-community/SelectFilter";
      |                          ^
    4 | import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter";
    5 | 
    6 | import filterTypes from "@inovua/reactdatagrid-community/filterTypes";

This issue is the same for the NumberFilter.

Reproduction repository:

Your example repo: https://github.com/inovua/reactdatagrid/blob/master/examples/pages/filters/select-null.page.tsx

Problem description:

Suggested solution:

Add missing TS definitions to the Filters.

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.29

Relevant code or config

const GridScrollDemo: React.FC<TypeComputedProps> = (props) => {
  const [gridRef, setGridRef] = React.useState<TypeComputedProps>();

  const handleGridScroll = React.useCallback(() => {
    console.log('grid', gridRef?.getScrollTop()); // <--- THIS NEVER GETS TO ZERO
  }, [gridRef]);

  const handleOnReady = (
    ref: React.MutableRefObject<TypeComputedProps | null>
  ) => {
    if (ref.current) {
      setGridRef?.(ref.current);
    }

    props.onReady?.(ref);
  };

  return (
    <ReactDataGrid
      {...props}
      onReady={handleOnReady}
      onScroll={handleGridScroll}
    />
  );
};

What you did:

Trying to get the scroll value in order to synchronize scrolling with other components. I've also tried activating "undocumented" feature:

    <ReactDataGrid
      {...props}
      onReady={handleOnReady}
      onScroll={handleGridScroll}
      scrollProps={{
        scrollDebounceDelay: 0
      }}
    />

I'm afraid it could cause other side effects, but I need this in order to synchronize the component scrolling.

Problem description:

Since it never goes to 0, the synchronization is off.

Suggested solution:

Fix the bug to return scroll 0

• what edition are you using - enterprise (for evaluation)
• version - 4.0.20

While trying to get inline editing working with infinite scrolling with a remote data source, I noticed that its not really possible since the data source isn't truly controlled. Since the dataSource must be method that returns the next set of data, I no longer have access to the entire set of rows since the table component keeps that state internally. For inline editing to actually work with server side data fetching, I'd need full control of the entire data set in order to correctly update the data to the new values.

Ideally, the data source API will be split into 2 different props. dataSource which will only be an array, and some sort of getRows prop which would be called whenever the table needed a new set of data.

What edition are you using :
Community
Version for @inovua/reactdatagrid-community :
4.0.8

Relevant code or config

import logo from './logo.svg';
import './App.css';

import React from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-community'
import '@inovua/reactdatagrid-community/index.css'
import Button from '@inovua/reactdatagrid-community/packages/Button'

const gridStyle = { minHeight: 550, marginTop: 10 };

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, type: 'number', maxWidth: 40 },
  { name: 'firstName', header: 'First Name', defaultFlex: 2 },
  { name: 'lastName', header: 'Last Name', defaultFlex: 2 },
  { name: 'email', header: 'Email', defaultFlex: 3 }
];

function App() {
  const [dataSource, setDataSource] = React.useState([]);

  const loadData = () => {
    setDataSource([{ id: 1, firstName: 'test', lastName: "test1", email: '[email protected]' }]);
  }

  return (
    <div>
      <h3>Sort with remote data</h3>
      <div>
        <Button onClick={loadData}>Load async data</Button>
        <Button
          onClick={() => setDataSource([])}
          style={{ marginLeft: 10 }}
        >Clear data</Button>
      </div>

      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        columns={columns}
        dataSource={dataSource}
      />
    </div>
  );
}

export default App;

What you did:
I load data from an array of object. Initialy the array is empty. When I click on the seach button, the array is filled with 1 results.

What happened:
The table always shows no record.

Reproduction repository:
https://github.com/lavoiekeven/bug-reactdatagird

Problem description:
The table is not refreshed when dataSource change

Suggested solution:
useEffect trigger on dataSource change ?

Hello, setGridRef in Typescript gives a weird error when trying to use it with onReady prop.
Here's a sandbox: https://codesandbox.io/s/dry-tree-7surl?file=/src/App.tsx

(JSX attribute) onReady?: ((computedPropsRef: React.MutableRefObject<TypeComputedProps | null>) => void) | undefined
Type 'Dispatch<SetStateAction<null>>' is not assignable to type '(computedPropsRef: MutableRefObject<TypeComputedProps | null>) => void'.
  Types of parameters 'value' and 'computedPropsRef' are incompatible.
    Type 'MutableRefObject<TypeComputedProps | null>' is not assignable to type 'SetStateAction<null>'.
      Type 'MutableRefObject<TypeComputedProps | null>' provides no match for the signature '(prevState: null): null'.ts(2322)
TypeDataGridProps.d.ts(94, 5): The expected type comes from property 'onReady' which is declared here on type 'IntrinsicAttributes & Pick<TypeDataGridProps, "style" | "filterable" | "onReady" | "handle" | "renderInPortal" | "onSkipChange" | ... 160 more ... | "isRowReorderValid"> & Partial<...> & Partial<...>'

Is there any solution to this? or am I doing something wrong...

• what edition are you using - community
• version for @inovua/reactdatagrid-community - 4.0.17

Relevant code or config

<ReactDataGrid
      idProperty="id"
      columns={columns}
      dataSource={dataSource}
      onSortInfoChange={handleSort}
      limit={10}
      // @ts-ignore
      onLimitChange={handlePageSize}
      // @ts-ignore
      onSkipChange={handlePageChange}
      sortable
      allowUnsort={false}
      style={gridStyle}
      pagination='remote' />

What you did:
Trying to do server site sorting/filtering/pagination, but typescript seems to be missing some definitions

What happened:

// @ts-ignore
onLimitChange={handlePageSize}
// @ts-ignore
onSkipChange={handlePageChange}

If I use @ts-ignore, both onLimitChange and onSkipChange work as expected, so its just the definitions missing.

Reproduction repository:
Codesandbox

Problem description:
I don't want to have to use ts-ignore to make the program work.

Hi,
focus issue on key navigaion.

• what edition are you using - community / enterprise: enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - latest version (reproducible on the docs site)

Relevant code or config

import React from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 550, maxWidth: 1000 };

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 100, type: 'number' },
  { name: 'name', defaultLocked: 'end', header: 'Name', defaultFlex: 1, minWidth: 450 },
  { name: 'country', header: 'Country', defaultFlex: 1, minWidth: 200,
    render: ({ value }) => flags[value] ? flags[value] : value
  },
  { name: 'city', header: 'City', defaultFlex: 1, minWidth: 450 },
  { name: 'age', header: 'Age', minWidth: 100, type: 'number' }
]

const App = () => {
  return (
    <div>
      <h3>Scroll horizontally to see the effect</h3>
      <ReactDataGrid
        idProperty="id"
        reorderColumns={false}
        style={gridStyle}
        columns={columns}
        dataSource={people}
        virtualizeColumns
      />
    </div>
  );
}

export default () => <App />

What you did:
Try to lock one of the column to the 'end' when 'virtualizeColumns' property of the grid is set to true.

What happened:
The first unlocked column shows artifacts of the locked column cells' text on top of its own text.

Reproduction repository:

Problem description:

Suggested solution:

Within our application, users can select which columns they do or do not want to see. Once they make their selections, we use the new set of columns to figure our what data we need to requests via our GQL client. This means that our data source has a dependency on the table columns and the table columns can change at any time (including while the table is fetching data for the previous set of columns).

This is what we see in our app when that happens:

1. Table has 1 column and requests first page of data
2. Table now has 3 columns and requests first page of data
3. Table has 3 columns and requests second page of data

The Grid then displays the first page of the 1 column request and the second page of the 3 column request. Instead, it should ignore the first request altogether and use the 2 pages of the 3 columns requests.

Reproduction:

Click on the "Re-Render" button. You might have to do this a few times and/or scroll the table a bit.

import React, { useState, useCallback } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import Button from '@inovua/reactdatagrid-community/packages/Button'
import DATASET_URL from './DATASET_URL'

const gridStyle = { minHeight: 550, marginTop: 10 }
const empty = () => null;

const columns = [
  { name: 'firstName', header: 'First Name', defaultFlex: 2 },
  { name: 'lastName', header: 'Last Name', defaultFlex: 2 },
  { name: 'email', header: 'Email', defaultFlex: 3 }
];

const loadData = ({ skip, sortInfo, limit }) => {
  return new Promise(resolve => setTimeout(resolve, 2000))
    .then(() => fetch(DATASET_URL + '?skip=' + skip + '&limit=' + limit + '&sortInfo='+JSON.stringify(sortInfo)))
    .then(response => {
      const totalCount = response.headers.get('X-Total-Count');
      return response.json().then((data) => {
        return { data, count: parseInt(totalCount) };
      })
    })
}

const App = () => {
  const [tableColumns, setTableColumns] = useState([...columns]);
  const dataSource = useCallback((params) => {
    return loadData(params).then(result => {
      // Since we only request data based on the selected columns, simulate that
      // same here by removing keys from the data that aren't part of the columns.
      const columnKeys = tableColumns.map((c) => c.name);
      const data = result.data.map((d) =>
        Object.fromEntries(
          Object.entries(d).filter(([key]) => columnKeys.includes(key))
        )
      );
      
      console.log('dataSource', { skip: params.skip, data, tableColumns })

      return { data, count: result.count };
    })
  }, [tableColumns]);
  
  const reRender = () => {
    // Remove some columns
    setTableColumns([...columns].slice(0, 1));

    setTimeout(() => {
      // Restore some columns
      setTableColumns([...columns]);
    }, 0);
  };

  return (
    <div>
      <Button onClick={reRender}>Re-Render</Button>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        columns={tableColumns}
        pagination
        livePagination
        limit={10}
        dataSource={dataSource}
      />
    </div>
  );
}

export default () => <App />

Hello everyone,

• what edition are you using - community
• version for @inovua/reactdatagrid-community- 4.0.23

Relevant code or config

import DataGrid from '@inovua/reactdatagrid-community';
import '@inovua/reactdatagrid-community/index.css';

const dataSource = [
  {basic: 'test1', complex: {name: 'name 1'}},
  {basic: 'test2', complex: {name: 'name 2'}},
  {basic: 'test3', complex: {name: 'name 3'}},
  {basic: 'test4', complex: {name: 'name 4'}},
  {basic: 'test5', complex: {name: 'name 5'}}
],
columns = [
  { name: 'basic', header: 'Basic' },
  { name: 'complex', header: 'Complex', render: ({ data }) => data.complex.name }
],
defaultFilterValue = [
  { name: 'basic', type: 'string', operator: 'contains', value: '' },
  { name: 'complex', type: 'string', operator: 'contains', value: '' }
];

export default function App() {
  return (
    <DataGrid
      columns={columns}
      pagination
      defaultFilterValue={defaultFilterValue}
      dataSource={dataSource} />
  );
}

It's look like filter is not possible on complex object.
When I want to filter on complex column, it just return No records available

Is someone have an idea how to implement filtering on complex object ?

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

What you did:
I have a column with values either true, false, or null. I have a filter on that column for each one of the values. I select "null" ("Blank" in the UI of the sandbox)

What happened:
Nothing. I expect to see only the row with the null value, and the word "Blank" in the filter.

Reproduction repository:
https://codesandbox.io/s/small-wood-ldn2d?file=/src/App.js

Problem description:
the filtering doesn't work.

Suggested solution:
do a check for null value in the filter

• what edition are you using - community but i can reproduce it on entreprise
• version 4.0.15

Relevant code or config
https://reactdatagrid.io/docs/api-reference#props-minRowHeight

What you did:
Try to use natural row height rendering with rowHeight=null and minRowHeight

What happened:
The big cell doesn't render as expected

Reproduction repository:
Documentation example : https://reactdatagrid.io/docs/api-reference#props-minRowHeight

Problem description:

The natural row height doesn't not work

With virtualized={false} the table does not render

• what edition are you using - community / enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise -

Relevant code or config

What you did:

What happened:

Reproduction repository:

Problem description:

Suggested solution:

• community v 4.0.22

What you did: implemented a grid in rtl mode
What happened: date filter icon doesnot have horizontal padding

Hi,

i'm using @inovua/reactdatagrid-community` and i cannot find how to translate "Today" message in calendar filter ?

Here "today" is not translatted but days and months are

I searched in documentation without result :

https://reactdatagrid.io/docs/api-reference#props-i18n

Any help ?

(I try to make this question in stackoverflow but i got this message :
"Creating the new tag 'reactdatagrid' requires at least 1500 reputation. Try something from the existing tags list instead."

Thanks

• what edition are you using - enterprise
• version for @inovua/reactdatagrid-communityor @inovua/reactdatagrid-enterprise - 4.0.16

What you did:
grid with grouping in which some of the cell values are undefined

What happened:
the grouping breaks:

Reproduction repository:
https://codesandbox.io/s/eager-lichterman-ug7k8?file=/src/App.js

Problem description:
Grouping is broken, and some of the data in our grids is undefined.

Suggested solution:
treat undefined like any other value. there should be a group of all undefined data. i.e. in the sandbox above, there would be a second group after "usa", and that group would have one member, with the undefined country and age.

• what edition are you using - enterprise (for evaluation)
• version - 4.0.20

Problem description:
The inline editing documentation here states that pressing the Escape key cancels cell editing. However, it seems that pressing Escape will call onEditCancel and onEditComplete, making it impossible to differentiate whether an edit was a true edit. I was able to reproduce this both on your documentation example and local code.

Expected behavior:
OnEditCancel and onEditComplete are mutually exclusive.

• what edition are you using - community or enterprise
• version 4.0.22
• macos, Google Chrome   ver 88.0.4324.96 , (x86_64)

What you did: implemented a grid in rtl or ltr mode
What happened: When table is scrollable, the last column of the table is truncated

Hi, thanks for your great plugin. I'm using enterprise version @inovua/[email protected], seems like renderRow property is missing but it is documented in the API docs

Here's a sandbox: https://codesandbox.io/s/eloquent-brattain-t954x?file=/src/App.tsx

Property 'renderRow' does not exist on type 'IntrinsicAttributes & Pick<TypeDataGridProps, "style" | "filterable" | "onReady" | "handle" | "renderInPortal" | "onSkipChange" | ... 160 more ... | "isRowReorderValid"> & Partial<...> & Partial<...>'

What I'm basically trying to do is to change the background color of each row based on some specific data, I thought that renderRow does the trick, is it removed from API or renamed, or maybe you can purpose a solution on doing something similar with another method or callback prop. Thanks in advance.