microsoft / fluentuieditabledetailslist Goto Github PK

If I selected a row and then change the sorting, the selection will not move with the sorting but just stick to the position:
(selected row is in position 3 from the top)

Change the sorting and you'll see that ID 345 is not selected anymore but ID933:
(the selection sticks to the position 3; it should go with the ID instead)

Same misbehavior is when you use the filters to drill down your selection:
If I select a row then change the filter to add a new row to the selection and remove the filter, the latest selected row is not selected, but it selects simply the position of where the filtered row was before.

Hi,

Don't know if I'm doing something wrong, but setting a custom onRender method in my column config (i.e. to display dates in a specific moment format, bolding text, or even just formatting a number to be displayed as currency with a thousand separator and a '$' prefix) makes it so that the column is no longer "editable".

I think the EditControlType defined in the config gets rendered in the same render method behind the scenes, so it's like I'm overwriting that "editing" functionality completely via my custom onRender.

Is there a workaround for this? Is there a way to put in the "editing" functionality myself in an onRender method? Or better yet, could there be another property like "onRenderDisplay" which controls just the display of the values rather than their editing inputs?

I am more than happy to develop this (or part of this). I would just need guidance on where things are.

Many thanks!

Hi,

Is there a way to go to the next row and fill in the next value [EDITFIELD] when TAB or ENTER or a specific key is pressed?

Hi @kushalmehrotra713 ,

I have been trying to apply column styles to the grid but it is not getting applied.

I am creating a style object as :

const headerStyle: Partial<IDetailsColumnStyles> = { cellTitle: { backgroundColor: "#FF0000", } };

And while defining the column, adding the above style
let dataGridColumns: IColumnConfig[] = [...fields].map(f => ({ styles:headerStyle, key: f.key as string, name: f.text, text: f.text as string, editable: true, dataType: 'string', minWidth: 100, maxWidth: 100, isResizable: true, includeColumnInExport: true, includeColumnInSearch: true, applyColumnFilter: true, disableSort:false }));

Unfortunately while running, the column styles are not getting rendered. Am I Missing something. Looking forward to you help on this.

Thanks in Advance !

Hi,
Keeping in mind issue56 I would like to have an access to Grid state to use it in other component and which will re-render it when I save data in grid. How can I achieve this?
Regards

Items are not loading from a Dataverse table. There are others reporting this issue on the PowerApps community.

Hello guys!

The selection={_selection} functionality is not working when checking a row, the event is not being fired.
Would they know why?

Thanks, I look forward to helping you.

If I have this component set up, where myItems is a piece of React State:

export default ({ myItems }) => {
  console.log({ myItems })

  return (
    <EditableGrid
      items={myItems}
      // ... rest of the props
    />
  )
}

The EditableGrid displays the items correctly, however setting myItems to an empty array (through the use of a button click separate to this library) re-renders this component and logs myItems as an empty array as you'd expect, but the EditableGrid stays populated with the now non-existent data.

Try changing EditableGrid to DetailsList, and you should see the expected behaviour of the DetailsList updating to display no data

I am working on Microsoft's PCF framework (you can see the tutorial here), and normally I can easily use the other FleuentUI components in the framework without any errors, but I have a requirement for EditableDetailsGrid, and I am not able to use it, I am getting following error.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I think, I am doing everything fine here, I double checked all the points mentioned here, but still getting the error.

Hello! My issue is that onChange function I pass to columns config fires when using inputType=EditControlType.TextField only. It is ignored for any other inputs - DropDown, etc.

UPD: Also, even for TextField - onChange event fires whenever I type a new letter, but it doesn't fire when I submit the changes by clicking Enter. So I'm struggling to implement pushing the values to backend because when onChange fires - it means that the user is continuing input but I don't know when they finish. Please help.

Hi,

Came across an issue where SharePoint Online refuses to download the BLOB created when exporting a CSV from the editable grid. This happens on a live site and NOT in the workbench (using SPFx).

The issue is easy to fix and I've got a working fix but don't quite know how to use Github for pull requests etc.

The issue stems from SharePoint's link manipulation. To disable it, use the attribute data-interception="off" on links so SharePoint forgoes any attempts at intercepting their original intent (i.e. generating BLOBs or even opening links up in new tabs). This is what's causing the CSV download to fail.

All that is needed is:

1. Go to line # 42 in gridexportutil.tsx
2. Add in :
   link.dataset.interception = 'off';

There is a similar issue reported here for a separate tool - basically just any custom "csv" export.
SharePoint/sp-dev-docs#4958

I'm currently trying to get sort to work on columns containing dates.

Here's my StartDate column
{ key: 'ProjectStartDate', name: strings.StartDate, text: strings.StartDate, minWidth: 200, dataType: "date", isResizable: true, onRender: (item: IProject) => { return <Text>{_formatDate(item.ProjectStartDate)}</Text> } }

Here's a screenshot of the StartDate being sorted.

EDIT: I imagine that the ones without dates should be places at the bottom, or top, depending on what sort is active. It shouldn't put them in between items with dates.

Currently I'm using SPFx v1.14.0. Clicking on "Bulk Edit" after selecting a row, with at least one editable column, I get the below error. I think there might be an environment mismatch when building/compiling the code via Babel.

Please note that this does not happen with the source code when running "npm start" and works perfectly.

Uncaught TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame')
at setCurrentlyValidatingElement$1 (react-jsx-runtime.development.js:872:1)
at validateExplicitKey (react-jsx-runtime.development.js:984:1)
at validateChildKeys (react-jsx-runtime.development.js:1013:1)
at jsxWithValidation (react-jsx-runtime.development.js:1184:1)
at jsxWithValidationDynamic (react-jsx-runtime.development.js:1209:1)
at EditPanel (editpanel.js:108:43)
at Yr (sp-pages-assembly_en-au_0a4bf7bfd698a9ad6d065bd3d5080219.js:69:63936)
at Ro (sp-pages-assembly_en-au_0a4bf7bfd698a9ad6d065bd3d5080219.js:69:72775)
at ys (sp-pages-assembly_en-au_0a4bf7bfd698a9ad6d065bd3d5080219.js:69:111038)
at pc (sp-pages-assembly_en-au_0a4bf7bfd698a9ad6d065bd3d5080219.js:69:102601)

This happens either when I publish my code to the AppCatalog in SharePoint or via "gulp serve" mode.

I noticed this project uses React 17.0.2+. With SPFx, I'm currently stuck at, but don't know if that impacts this.

"@types/react": "16.9.51",
"@types/react-dom": "16.9.8"

Now, I've tried this with the current latest repo code in addition to a forked repo I'm working on (built via "npm run build") and I get the same result.

Could anyone please help with this?

EDIT: PLEASE SEE MY NEW COMMENT BELOW

Hello,

When i add a onChange event on my column, the whole grid crash.

Here is my column:
{
key: 'name',
name: 'Name',
text: 'Name',
editable: true,
dataType: 'string',
minWidth: 100,
maxWidth: 100,
isResizable: true,
includeColumnInExport: true,
includeColumnInSearch: true,
applyColumnFilter: true,
inputType: EditControlType.TextField,
onChange: this.newMethod
},

and whatever I put in "newMethod", when I type something in the textbox, the grid disappear and in the console I got this error twice :

TypeError: Cannot read properties of undefined (reading 'forEach')
at sg (timesheets-web-part_…2fe55e.js:2:1392297)
at Xe (timesheets-web-part_…2fe55e.js:2:1432831)
at We (timesheets-web-part_…2fe55e.js:2:1432291)
at onChange (timesheets-web-part_…2fe55e.js:2:1442932)
at t. (timesheets-web-part_…2fe55e.js:2:1203503)
at dr (react-dom-16-bundle_…d7fd18cd.js:2:54474)
at as (react-dom-16-bundle_…d7fd18cd.js:2:89482)
at uc (react-dom-16-bundle_…7fd18cd.js:2:107135)
at t.unstable_runWithPriority (react-dom-16-bundle_…dd7fd18cd.js:2:5230)
at Bi (react-dom-16-bundle_…d7fd18cd.js:2:50948)

any clue ?
Thanks

I have tried removing the multiline={true} from the EditControlType.MultilineTextField's render method, and this seems to stop the problem from happening. But obviously, I can't get a multiline text field that way. Has anyone encountered this?

                                <TextField
                                errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
                                label={item.text}
                                ariaLabel={column.key}
                                //multiline={true} // this line seems to be causing the issue
                                rows={1}
                                styles={textFieldStyles}
                                onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
                                autoFocus={true && !editMode && !(activateCellEdit && activateCellEdit[Number(item['_grid_row_id_'])!] && activateCellEdit[Number(item['_grid_row_id_'])!]['isActivated'])}
                                value={activateCellEdit[rowNum!]['properties'][column.key].value}
                                maxLength={column.maxLength != null ? column.maxLength : 10000}
                                />

EDIT: I have discovered that my cursor is also jumping to the end if multiline is not there. So, this is an issue not specific to multiline, but hopefully gives a clue as to what is going on.

How to format dates on date columns??
I cant find any method or workarround to accomplish this common feature

I am using condition rendering in React . when the component is rerenderd the data is not visible Only colums are visible

Hello,

When I define a column, the minWidth is not taken into account. The column always has the max width, even if I don't have enough space. I have a column I defined minWidth 200 and maxWidth 500, with no data : it always takes 500 width, and that creates an horizontal scroll because my screen is too small.

For info, I tried the DetailsList from FluentUI and it works.

Thanks !

I am working on [Microsoft's PCF framework] and normally I can easily use the other FleuentUI components in the framework without any errors, but I have a requirement for EditableDetailsGrid, and I am not able to use it, I am getting following error. Any leads will be highly helpful.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Is there any functionality to display items in grid in groups?

Hello,

I tried to add a footer following this example :
https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/customfooter

The row is there, but nothing in it. The onRenderItemColumn method is not executed. Any idea why ?

Thanks

We were looking to implement this library in our production code base. We were wondering if this library is still being maintained. I See the last commit 3 months ago (and the only contributor has not made any github contributions since then.

If the anwser is yes, then my question is, if the library can be made available as a real library instead of a create-react-app implementation?

When column filter is displayed, the modal has 3 dropdowns with the same placeholders,

But based on the usage seems that they should not look like that.

• Second dropdown should have the place holder "Select the operator"

• Third dropdown should be Textbox instead. (In fact when you select the column, the third dropdown changes to an Textbox)

The modal looks strange with current initial state..

When a row is not selected, can you provide an option to display the checkbox?

just like this

Thanks

Description
All versions of SheetJS CE through 0.19.2 are vulnerable to "Prototype Pollution" when reading specially crafted files. Workflows that do not read arbitrary files (for example, exporting data to spreadsheet files) are unaffected.

A non-vulnerable version cannot be found via npm, as the repository hosted on GitHub and the npm package xlsx are no longer maintained.

Issue:
In our system, we exclusively use npm, and xlsx does not release new versions to npm. Please let me know how to resolve the problem.

Hello yall,
We tried to install your library in our project, but the install fails due to dependency issues. Every solution we tried so far did not resolve the issue, sometimes they even got worse.

npm log:

npm i fluentui-editable-grid --save
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: @types/[email protected]
npm WARN node_modules/@types/react
npm WARN peer @types/react@">=16.8.0 <18.0.0" from @fluentui/[email protected]
npm WARN node_modules/@fluentui/foundation-legacy
npm WARN @fluentui/foundation-legacy@"^8.1.13" from @fluentui/[email protected]
npm WARN node_modules/@fluentui/react
npm WARN 14 more (@fluentui/react, @fluentui/react-focus, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @types/react@">=16.8.0 <17.0.0" from [email protected]
npm WARN node_modules/office-ui-fabric-react
npm WARN office-ui-fabric-react@"^7.0.0" from [email protected]
npm WARN node_modules/fluentui-editable-grid
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: @types/[email protected]
npm WARN node_modules/@types/react-dom
npm WARN peer @types/react-dom@">=16.8.0 <18.0.0" from @fluentui/[email protected]
npm WARN node_modules/@fluentui/react
npm WARN @fluentui/react@"^8.30.3" from the root project
npm WARN 1 more (fluentui-editable-grid)
npm WARN 2 more (the root project, fluentui-editable-grid)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @types/react-dom@">=16.8.0 <17.0.0" from [email protected]
npm WARN node_modules/office-ui-fabric-react
npm WARN office-ui-fabric-react@"^7.0.0" from [email protected]
npm WARN node_modules/fluentui-editable-grid
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN peer react@">=16.8.0 <18.0.0" from @fluentui/[email protected]
npm WARN node_modules/@fluentui/foundation-legacy
npm WARN @fluentui/foundation-legacy@"^8.1.13" from @fluentui/[email protected]
npm WARN node_modules/@fluentui/react
npm WARN 18 more (@fluentui/react, @fluentui/react-focus, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">=16.8.0 <17.0.0" from [email protected]
npm WARN node_modules/office-ui-fabric-react
npm WARN office-ui-fabric-react@"^7.0.0" from [email protected]
npm WARN node_modules/fluentui-editable-grid
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@">=16.8.0 <18.0.0" from @fluentui/[email protected]
npm WARN node_modules/@fluentui/react
npm WARN @fluentui/react@"^8.30.3" from the root project
npm WARN 1 more (fluentui-editable-grid)
npm WARN 5 more (@testing-library/react, styled-components, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@">=16.8.0 <17.0.0" from [email protected]
npm WARN node_modules/office-ui-fabric-react
npm WARN office-ui-fabric-react@"^7.0.0" from [email protected]
npm WARN node_modules/fluentui-editable-grid
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @types/[email protected]
npm ERR! node_modules/@types/react
npm ERR! peer @types/react@">=16.8.0 <18.0.0" from @fluentui/[email protected]
npm ERR! node_modules/@fluentui/foundation-legacy
npm ERR! @fluentui/foundation-legacy@"^8.1.13" from @fluentui/[email protected]
npm ERR! node_modules/@fluentui/react
npm ERR! @fluentui/react@"^8.30.3" from the root project
npm ERR! 1 more (fluentui-editable-grid)
npm ERR! peer @types/react@">=16.8.0 <18.0.0" from @fluentui/[email protected]
npm ERR! node_modules/@fluentui/react
npm ERR! @fluentui/react@"^8.30.3" from the root project
npm ERR! @fluentui/react@"^8.26.0" from [email protected]
npm ERR! node_modules/fluentui-editable-grid
npm ERR! fluentui-editable-grid@"" from the root project
npm ERR! 13 more (@fluentui/react-focus, @fluentui/react-hooks, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @types/react@">=16.8.0 <17.0.0" from @fluentui/[email protected]
npm ERR! node_modules/office-ui-fabric-react/node_modules/@fluentui/react-focus
npm ERR! @fluentui/react-focus@"^7.18.0" from [email protected]
npm ERR! node_modules/office-ui-fabric-react
npm ERR! office-ui-fabric-react@"^7.0.0" from [email protected]
npm ERR! node_modules/fluentui-editable-grid
npm ERR! fluentui-editable-grid@"" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

our package.json:

{
"name": "app.ui",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:7011",
"dependencies": {
"@azure/msal-browser": "^2.16.1",
"@fluentui/react": "^8.30.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.10",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"@types/react-json-tree": "^0.13.0",
"@types/react-router-dom": "^5.1.8",
"@types/styled-components": "^5.1.14",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.15.3",
"react-json-tree": "^0.15.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"rxjs": "^7.3.0",
"styled-components": "^5.3.1",
"typescript": "^4.3.4",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "set PORT=3333&&react-scripts start",
"prestart": "copy .\cert\cert.pem .\node_modules\webpack-dev-server\ssl",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"csp": "node csp.js",
"format": "prettier --write src/**/*.ts{,x}"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"husky": {
"hooks": {
"pre-commit": "npm run format && npm audit fix"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.2",
"prettier": "^2.3.2"
}
}

Do you guys know what is wrong, or why it won't install?
Kind regards

Hello,

When I want to edit a text in a textbox, it's drawing a rectangle and doesn't select the text. Here is an example:

Any idea why ?

I have another question, I use the Picker for the autocomplete. My problem is that by default it only searches in the beginning of the text (like "startswith"), not in whole string. To change this I want to use the callback named onResolveSuggestions. Is it possible ? Do I have access to it ?

Thanks !

When I use the column filter I type in the search term and the filter drills down the entries but before I can apply the filter I need to deselect the select all and then manually select the entries I want to apply the filter on. Expected behavior would be:
when entering the search term, the select all is already removed and the matching entries are automatically selected. This is similar to how it behaves in Excel.

Hi,

sorry for the noobish question but how do i toggle the UnsavedEditIndiator? In the demo the Icon just becomes gray as soon as you submit the changes but but if im correct i cant see what you are doing to acomplish that :)

I hope you can help me

Hello! Is there any method to add the functionality of paging to this grid?

Hi, thanks for the very useful component.

I would like to ask you if you plan to publish an npm package? If yes do you know the timeframe?

@kushalmehrotra713

Regards
Christos

Hi ,

Thank You @kushalmehrotra713 for the wonderful work on the editable grid.

I am trying to create a SPFx(SharePoint Framework) webpart and consume the Editable Grid. Since I have like 100+ Columns, the Actions Column that allows Individual Edit/Save is being placed at the extreme right of the grid which can only be viewed by using the scroll bar.

Is there a way to freeze the position of the Actions column to the First Position ?

Thanks in Advance !

Hi,

I've been looking for some time now, for a way to simulate or to just put the grid in edit mode upon rendering. I don't find any options in the codebase to do this. Will this be added? When the grid is rendered I need people to be immediately able to fill in fields and just press 1 save button.

Thanks

Would be really great if you allowed us to add additional buttons to the command bar. For example, I want to be able to support pasting data from Excel and, although I could handle the event myself it would be nice to have the option to add this to the command bar so I could present a dialog.