inovua / reactdatagrid Goto Github PK
View Code? Open in Web Editor NEWEmpower Your Data with the best React Data Grid there is
Home Page: https://reactdatagrid.io
License: Other
Empower Your Data with the best React Data Grid there is
Home Page: https://reactdatagrid.io
License: Other
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?
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.
How is it possible to even change skip value from your example, when there is no callback prop for onscroll/livepagination page change?
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.16What you did: implemented a grid with grouping in rtl mode
Reproduction repository:
https://codesandbox.io/s/gracious-sun-khueb
Problem description:
UI is broken
Suggested solution:
Fix it :)
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.29Relevant 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
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.
Hello everyone,
@inovua/reactdatagrid-community
- 4.0.23Relevant 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 ?
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 />
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:
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:
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 />
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:
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.
@inovua/reactdatagrid-community
- 4.0.14What 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.
@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
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.
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.
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.
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.
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.
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:
Toggle Details
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 />
@inovua/reactdatagrid-community
- 4.0.29Relevant 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()
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.16Relevant 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.
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.
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 ?
❓ 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,
@inovua/reactdatagrid-enterprise
-4.0.22Relevant 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:
@inovua/reactdatagrid-community
- 4.0.17Relevant 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,
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
@inovua/reactdatagrid-community
or @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:
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:
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.
@inovua/reactdatagrid-community
- 4.0.20Relevant 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),
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.
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.16What 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.
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.16What 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
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.16What 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.
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
- 4.0.16What 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
.
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 />
Hey there :)
@inovua/reactdatagrid-community
- 4.0.30What 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.
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.
@inovua/reactdatagrid-community
- 4.0.27Relevant 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
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.
@inovua/reactdatagrid-community
or @inovua/reactdatagrid-enterprise
-Relevant code or config
What you did:
What happened:
Reproduction repository:
Problem description:
Suggested solution:
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.
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:
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.
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...
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 />
what edition are you using - enterprise (paying customer)
version for @inovua/reactdatagrid-community
or @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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.