honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated sample json and readme

This commit is contained in:
Hugo Bernier 2022-02-13 00:56:46 -05:00
parent 7f7dfa72a9
commit 02f93985d1
19 changed files with 322 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/README-template.md
View File

@ -35,7 +35,7 @@ You can add as many screen shots as you'd like to help users understand your web
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1") ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above") ![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg) ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
<!-- <!--
If using SPFx 1.12.1, update the SPFx and Node.js tags accordingly: If using SPFx 1.12.1, update the SPFx and Node.js tags accordingly:
@ -141,6 +141,8 @@ As tempting as it may be, don't just use images to describe the steps. Let's be
* `npm install` * `npm install`
* `gulp serve` * `gulp serve`
> Don't want to clone the entire repository? Try downloading this folder [as a Zip file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/YOUR-SOLUTION-NAME). Unzip the file, and continue with the command-line instructions.
## Features ## Features
Description of the web part with possible additional details than in short summary. Description of the web part with possible additional details than in short summary.

39
samples/react-datatable-using-mui-tables/.devcontainer/devcontainer.json Normal file
View File

@ -0,0 +1,39 @@
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
{
"name": "SPFx 1.12.1",
"image": "docker.io/m365pnp/spfx:1.12.1",
// Set *default* container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
4321,
35729
],
"portsAttributes": {
"4321": {
"protocol": "https",
"label": "Manifest",
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
// "5432": {
// "protocol": "https",
// "label": "Workbench",
// "onAutoForward": "silent"
// },
"35729": {
"protocol": "https",
"label": "LiveReload",
"onAutoForward": "silent",
"requireLocalPort": true
}
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}

33
samples/react-datatable-using-mui-tables/.devcontainer/spfx-startup.sh Normal file
View File

@ -0,0 +1,33 @@
echo
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
npm install
## commands to create dev certificate and copy it to the root folder of the project
echo
echo -e "\e[1;94mGenerating dev certificate\e[0m"
gulp trust-dev-cert
# Convert the generated PEM certificate to a CER certificate
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
# Copy the PEM ecrtificate for non-Windows hosts
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
## add *.cer to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.cer' ./.gitignore
then
echo "# .CER Certificates" >> .gitignore
echo "*.cer" >> .gitignore
fi
## add *.pem to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.pem' ./.gitignore
then
echo "# .PEM Certificates" >> .gitignore
echo "*.pem" >> .gitignore
fi
echo
echo -e "\e[1;92mReady!\e[0m"
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

4
samples/react-datatable-using-mui-tables/.gitignore vendored
View File

@ -28,3 +28,7 @@ obj
# Styles Generated Code # Styles Generated Code
*.scss.ts *.scss.ts
# .CER Certificates
*.cer
# .PEM Certificates
*.pem

45
samples/react-datatable-using-mui-tables/README.md
View File

@ -1,4 +1,4 @@
# SharePoint Framework DataTable Using MUI table web part sample # DataTable Using MUI table
## Summary ## Summary
@ -22,12 +22,13 @@ This web part provides mui datatable features for your lists
## Compatibility ## Compatibility
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) ![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted](https://img.shields.io/badge/Workbench-%20Hosted-yellow.svg) ![Workbench Hosted](https://img.shields.io/badge/Workbench-%20Hosted-yellow.svg)
![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Require access to local SharePoint data")
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
## Applies to ## Applies to
@ -38,7 +39,7 @@ This web part provides mui datatable features for your lists
Solution|Author(s) Solution|Author(s)
--------|--------- --------|---------
react-datatable-using-mui-tables | Jeffin Jacob (https://www.linkedin.com/in/drjeffinjacob/) react-datatable-using-mui-tables | [Jeffin Jacob](https://github.com/jeffinjacob)) (https://www.linkedin.com/in/drjeffinjacob/)
## Version history ## Version history
@ -46,19 +47,39 @@ Version|Date|Comments
-------|----|-------- -------|----|--------
1.0|January 30, 2022|Initial release 1.0|January 30, 2022|Initial release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome ## Minimal Path to Awesome
### Local testing
* Clone the repository * Clone the repository
* `cd` to web part's project folder * `cd` to web part's project folder
* In the command line run: * In the command line run:
* `npm install` * `npm install`
* `gulp serve` * `gulp serve`
> Don't want to clone the entire repository? Try downloading this folder [as a Zip file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable-using-mui-tables). Unzip the file, and continue with the command-line instructions.
## Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-datatable-using-mui-tables%22) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-datatable-using-mui-tables) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-datatable-using-mui-tables&template=bug-report.yml&sample=react-datatable-using-mui-tables&authors=@jeffinjacob&title=react-datatable-using-mui-tables%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-datatable-using-mui-tables&template=question.yml&sample=react-datatable-using-mui-tables&authors=@jeffinjacob&title=react-datatable-using-mui-tables%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-datatable-using-mui-tables&template=suggestion.yml&sample=react-datatable-using-mui-tables&authors=@jeffinjacob&title=react-datatable-using-mui-tables%20-%20).
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-datatable-using-mui-tables" />

37
samples/react-datatable-using-mui-tables/assets/sample.json
View File

@ -1,18 +1,17 @@
[ [
{ {
"name": "pnp-sp-dev-spfx-web-parts-react-datatable", "name": "pnp-sp-dev-spfx-web-parts-react-datatable-using-mui-tables",
"source": "pnp", "source": "pnp",
"title": "Data Table", "title": "DataTable Using MUI table",
"shortDescription": "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features.", "shortDescription": "This web part provides mui datatable features for your lists.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable", "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable-using-mui-tables",
"longDescription": [ "longDescription": [
"This web part provides easy way to render SharePoint custom list in data table view with all the necessary features." "This web part provides mui datatable features for your lists."
], ],
"creationDateTime": "2021-03-01", "creationDateTime": "2022-01-30",
"updateDateTime": "2021-04-10", "updateDateTime": "2022-01-30",
"products": [ "products": [
"SharePoint", "SharePoint"
"Office"
], ],
"metadata": [ "metadata": [
{ {
@ -21,7 +20,7 @@
}, },
{ {
"key": "SPFX-VERSION", "key": "SPFX-VERSION",
"value": "1.11.0" "value": "1.12.1"
}, },
{ {
"key": "PNPCONTROLS", "key": "PNPCONTROLS",
@ -32,17 +31,21 @@
{ {
"type": "image", "type": "image",
"order": 100, "order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable/assets/preview.png", "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable-using-mui-tables/assets/first.png",
"alt": "Data Table" "alt": "Data Table with MUI"
},
{
"type": "image",
"order": 101,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable-using-mui-tables/assets/second.png",
"alt": "Data Table with MUI"
} }
], ],
"authors": [ "authors": [
{ {
"gitHubAccount": "chandaniprajapati", "gitHubAccount": "jeffinjacob",
"company": "", "pictureUrl": "https://github.com/jeffinjacob.png",
"pictureUrl": "https://github.com/chandaniprajapati.png", "name": "Jeffin Jacob"
"name": "Chandani Prajapati",
"twitter": "Chandani_SPD"
} }
], ],
"references": [ "references": [

3
samples/react-datatable-using-mui-tables/config/config.json
View File

@ -14,6 +14,7 @@
"externals": {}, "externals": {},
"localizedResources": { "localizedResources": {
"ReactDatatableWebPartStrings": "lib/webparts/reactDatatable/loc/{locale}.js", "ReactDatatableWebPartStrings": "lib/webparts/reactDatatable/loc/{locale}.js",
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js" "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
} }
} }

13
samples/react-datatable-using-mui-tables/package-lock.json generated
View File

@ -10708,6 +10708,11 @@
} }
} }
}, },
"file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"file-uri-to-path": { "file-uri-to-path": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@ -18995,6 +19000,14 @@
"resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.0.3.tgz", "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.0.3.tgz",
"integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w==" "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w=="
}, },
"react-csv-downloader": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/react-csv-downloader/-/react-csv-downloader-2.7.1.tgz",
"integrity": "sha512-fA6QN5YnIzl7eWDPkAvuHVJV7bUP+pSpPLETeO3QMfWiauqgSxghvC/l+3m4N5IA+AaiqSUPnwb6q/icGdmoLg==",
"requires": {
"file-saver": "^2.0.2"
}
},
"react-dom": { "react-dom": {
"version": "16.9.0", "version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",

1
samples/react-datatable-using-mui-tables/package.json
View File

@ -27,6 +27,7 @@
"pdfmake": "^0.1.70", "pdfmake": "^0.1.70",
"react": "16.9.0", "react": "16.9.0",
"react-csv": "^2.0.3", "react-csv": "^2.0.3",
"react-csv-downloader": "^2.7.1",
"react-dom": "16.9.0" "react-dom": "16.9.0"
}, },
"devDependencies": { "devDependencies": {

104
samples/react-datatable-using-mui-tables/release/component-dependency-audit/react-datatable-using-mui-tables.json Normal file
View File

@ -0,0 +1,104 @@
{
"bundles": {
"react-datatable-web-part": {
"dependencies": [
{
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"componentName": "@microsoft/sp-property-pane",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
"componentName": "@microsoft/sp-loader",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
"componentName": "@ms/sp-telemetry",
"componentVersion": "0.19.2",
"isDirectDependency": false
},
{
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
"componentName": "@microsoft/sp-dynamic-data",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"componentName": "@microsoft/sp-lodash-subset",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"componentName": "@microsoft/sp-core-library",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
"componentName": "tslib",
"componentVersion": "1.10.0",
"isDirectDependency": false
},
{
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
"componentName": "@ms/odsp-core-bundle",
"componentVersion": "1.1.13",
"isDirectDependency": false
},
{
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
"componentName": "@microsoft/sp-diagnostics",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
"componentName": "@microsoft/sp-page-context",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
"componentName": "@microsoft/load-themed-styles",
"componentVersion": "0.1.2",
"isDirectDependency": false
},
{
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
"componentName": "@microsoft/sp-http",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"componentName": "react",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"componentName": "react-dom",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
"componentName": "@microsoft/sp-webpart-base",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"componentName": "@microsoft/sp-component-base",
"componentVersion": "1.12.1",
"isDirectDependency": false
}
]
}
}
}

62
samples/react-datatable-using-mui-tables/release/manifests/9d6e26c1-e57c-4005-ad6a-5b066f1acd65.manifest.json
View File

@ -39,7 +39,7 @@
"scriptResources": { "scriptResources": {
"react-datatable-web-part": { "react-datatable-web-part": {
"type": "path", "type": "path",
"path": "react-datatable-web-part_f02f9038fa04b6e23001.js" "path": "react-datatable-web-part.js"
}, },
"@microsoft/sp-property-pane": { "@microsoft/sp-property-pane": {
"type": "component", "type": "component",
@ -58,7 +58,7 @@
}, },
"ReactDatatableWebPartStrings": { "ReactDatatableWebPartStrings": {
"type": "path", "type": "path",
"path": "ReactDatatableWebPartStrings_en-us_b7b8b3dc2975d10c3880c97c4438ff50.js" "path": "ReactDatatableWebPartStrings_en-us.js"
}, },
"@microsoft/sp-webpart-base": { "@microsoft/sp-webpart-base": {
"type": "component", "type": "component",
@ -83,36 +83,36 @@
"PropertyControlStrings": { "PropertyControlStrings": {
"type": "localizedPath", "type": "localizedPath",
"paths": { "paths": {
"bg-BG": "PropertyControlStrings_bg-bg_8ed72ece3685811017132eb844d74d2b.js", "bg-BG": "PropertyControlStrings_bg-bg.js",
"ca-ES": "PropertyControlStrings_ca-es_4584e999630b4da0f3943516915be8f0.js", "ca-ES": "PropertyControlStrings_ca-es.js",
"da-DK": "PropertyControlStrings_da-dk_1d0932d33a05e1bfcf90ff2073389182.js", "da-DK": "PropertyControlStrings_da-dk.js",
"de-DE": "PropertyControlStrings_de-de_d40342425b678318d0419e6ad9dd6f70.js", "de-DE": "PropertyControlStrings_de-de.js",
"el-GR": "PropertyControlStrings_el-gr_85080a0fd923b34329ed3afc8e24f0ca.js", "el-GR": "PropertyControlStrings_el-gr.js",
"en-US": "PropertyControlStrings_en-us_3770839de1f3a0bef2a56730368aab40.js", "en-US": "PropertyControlStrings_en-us.js",
"es-ES": "PropertyControlStrings_es-es_69e478d7c5043b45e6628ac2c9e2de4b.js", "es-ES": "PropertyControlStrings_es-es.js",
"et-EE": "PropertyControlStrings_et-ee_598f724341a6fb38723922f994e302e0.js", "et-EE": "PropertyControlStrings_et-ee.js",
"fi-FI": "PropertyControlStrings_fi-fi_0f6d7d22b90096f65e849824ea36f036.js", "fi-FI": "PropertyControlStrings_fi-fi.js",
"fr-FR": "PropertyControlStrings_fr-fr_f17d1581e1807a854fa5df15365797bb.js", "fr-FR": "PropertyControlStrings_fr-fr.js",
"it-IT": "PropertyControlStrings_it-it_8f63bbadd3620640d822549f04da2ccb.js", "it-IT": "PropertyControlStrings_it-it.js",
"ja-JP": "PropertyControlStrings_ja-jp_1ab0c1b344e245022153106fc5722a75.js", "ja-JP": "PropertyControlStrings_ja-jp.js",
"lt-LT": "PropertyControlStrings_lt-lt_1e9c7953e8515297e074b213288dfaaa.js", "lt-LT": "PropertyControlStrings_lt-lt.js",
"lv-LV": "PropertyControlStrings_lv-lv_56d7a5f081517fa938fa8bc2d903cd97.js", "lv-LV": "PropertyControlStrings_lv-lv.js",
"nb-NO": "PropertyControlStrings_nb-no_357d85cd6acd4c9cdfc5cc8c0b198986.js", "nb-NO": "PropertyControlStrings_nb-no.js",
"nl-NL": "PropertyControlStrings_nl-nl_217fc5878d50553567c652e81c1b743c.js", "nl-NL": "PropertyControlStrings_nl-nl.js",
"no": "PropertyControlStrings_no_819bcb574a9a9b7bee923721da82f3af.js", "no": "PropertyControlStrings_no.js",
"pl-PL": "PropertyControlStrings_pl-pl_c233eab225f8a0a54bfd72e8cf26fcad.js", "pl-PL": "PropertyControlStrings_pl-pl.js",
"pt-PT": "PropertyControlStrings_pt-pt_4e8ff2c4c080c29048b237bec8d6c857.js", "pt-PT": "PropertyControlStrings_pt-pt.js",
"ro-RO": "PropertyControlStrings_ro-ro_5a1eb0ace969b2930de4c2b89f9791cc.js", "ro-RO": "PropertyControlStrings_ro-ro.js",
"ru-RU": "PropertyControlStrings_ru-ru_f2b220073240303d6e0a4693c7a95d24.js", "ru-RU": "PropertyControlStrings_ru-ru.js",
"sk-SK": "PropertyControlStrings_sk-sk_753cba40099869f50de2c9bc8d1f54e3.js", "sk-SK": "PropertyControlStrings_sk-sk.js",
"sr-Latn-RS": "PropertyControlStrings_sr-latn-rs_673d7d1f6c33e4e706753cf7dceb0655.js", "sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js",
"sv-SE": "PropertyControlStrings_sv-se_5dbecd28947c574648adbe0516fa2b3b.js", "sv-SE": "PropertyControlStrings_sv-se.js",
"tr-TR": "PropertyControlStrings_tr-tr_cda80038fa0f28a0926730ba014ef8d2.js", "tr-TR": "PropertyControlStrings_tr-tr.js",
"vi-VN": "PropertyControlStrings_vi-vn_e285a250de584da19f4d2bcda40cd095.js", "vi-VN": "PropertyControlStrings_vi-vn.js",
"zh-CN": "PropertyControlStrings_zh-cn_f54e63ffc9812984f622f4eef90882c9.js", "zh-CN": "PropertyControlStrings_zh-cn.js",
"zh-TW": "PropertyControlStrings_zh-tw_c48095a54869748740db4e3387cd8006.js" "zh-TW": "PropertyControlStrings_zh-tw.js"
}, },
"defaultPath": "PropertyControlStrings_en-us_3770839de1f3a0bef2a56730368aab40.js" "defaultPath": "PropertyControlStrings_en-us.js"
} }
} }
} }

20
samples/react-datatable-using-mui-tables/src/shared/common/ExpandableRow/Row.tsx
View File

@ -3,12 +3,12 @@ import { PrimaryButton, DefaultButton, ActionButton } from 'office-ui-fabric-rea
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown'; import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
import { Box, Collapse, IconButton, Link, TableCell, TableRow } from "@material-ui/core"; import { Box, Collapse, IconButton, Link, TableCell, TableRow } from "@material-ui/core";
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp' import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown' import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
export interface IRowProps { export interface IRowProps {
columns: any[]; columns: any[];
row: any row: any;
} }
export interface IRowState { export interface IRowState {
@ -23,7 +23,7 @@ export class Row extends React.Component<IRowProps, IRowState> {
} }
public render(): React.ReactElement<IRowProps> { public render(): React.ReactElement<IRowProps> {
let { columns, row } = this.props let { columns, row } = this.props;
return ( return (
<> <>
@ -35,14 +35,14 @@ export class Row extends React.Component<IRowProps, IRowState> {
: column.key == "AllApplications" ? : column.key == "AllApplications" ?
<TableCell align="left">{ <TableCell align="left">{
row[column.key].split(',').map((item,index) => { row[column.key].split(',').map((item,index) => {
return <>{index?", ":""}<Link style={{cursor:"pointer"}} onClick={()=>window.open("./Refer.aspx?itemid="+item)}>{item}</Link></> return <>{index?", ":""}<Link style={{cursor:"pointer"}} onClick={()=>window.open("./Refer.aspx?itemid="+item)}>{item}</Link></>;
})}</TableCell> : <TableCell align="left">{row[column.key]}</TableCell> })}</TableCell> : <TableCell align="left">{row[column.key]}</TableCell>;
}) })
} }
<TableCell> <TableCell>
<IconButton <IconButton
aria-label="expand row" aria-label="expand row"
onClick={() => { this.setState({ open: !this.state.open }) }} onClick={() => { this.setState({ open: !this.state.open }); }}
> >
{this.state.open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} {this.state.open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton> </IconButton>
@ -54,12 +54,12 @@ export class Row extends React.Component<IRowProps, IRowState> {
<Box sx={{ margin: 1 }}> <Box sx={{ margin: 1 }}>
{ {
<div style={{ width: "86%", float: "left" }}>{row['AttachmentFiles'].map(att => { <div style={{ width: "86%", float: "left" }}>{row['AttachmentFiles'].map(att => {
return <ActionButton iconProps={{ iconName: att.FileName.endsWith(".docx") ? "WordDocument" : "PDF" }} onClick={() => { window.open(att.ServerRelativeUrl + "?web=1") }} allowDisabledFocus> return <ActionButton iconProps={{ iconName: att.FileName.endsWith(".docx") ? "WordDocument" : "PDF" }} onClick={() => { window.open(att.ServerRelativeUrl + "?web=1"); }} allowDisabledFocus>
{att.FileName} {att.FileName}
</ActionButton> </ActionButton>;
})}</div> })}</div>
} }
<ActionButton onClick={()=>{window.open('./Refer.aspx?CId='+row.id)}} iconProps={{ iconName: "addFriend" }}> <ActionButton onClick={()=>{window.open('./Refer.aspx?CId='+row.id);}} iconProps={{ iconName: "addFriend" }}>
Add To Application Add To Application
</ActionButton> </ActionButton>
</Box> </Box>

2
samples/react-datatable-using-mui-tables/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSV.tsx
View File

@ -4,7 +4,7 @@ import { ExportToCsv } from 'export-to-csv';
import CsvDownloader from 'react-csv-downloader'; import CsvDownloader from 'react-csv-downloader';
import { IIconProps, PrimaryButton } from 'office-ui-fabric-react'; import { IIconProps, PrimaryButton } from 'office-ui-fabric-react';
import styles from './ExportListItemsToCSV.module.scss'; import styles from './ExportListItemsToCSV.module.scss';
import CloudDownload from '@material-ui/icons/CloudDownload' import CloudDownload from '@material-ui/icons/CloudDownload';
import { Button, Chip } from '@material-ui/core'; import { Button, Chip } from '@material-ui/core';
interface IExportToCSV { interface IExportToCSV {
columnHeader: Array<string>; columnHeader: Array<string>;

1
samples/react-datatable-using-mui-tables/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter.ts
View File

@ -8,6 +8,7 @@ export function csvCellFormatter(value: any, type: string) {
break; break;
case 'SP.FieldUser': case 'SP.FieldUser':
value = value.props.displayName; value = value.props.displayName;
break;
default: default:
break; break;
} }

4
samples/react-datatable-using-mui-tables/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDF.tsx
View File

@ -7,7 +7,7 @@ import { IconButton, IIconProps, PrimaryButton } from 'office-ui-fabric-react';
import styles from './ExportListItemsToPDF.module.scss'; import styles from './ExportListItemsToPDF.module.scss';
import { isNullOrUndefined } from '../../utilities/utilities'; import { isNullOrUndefined } from '../../utilities/utilities';
import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane'; import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
import CloudDownload from '@material-ui/icons/CloudDownload' import CloudDownload from '@material-ui/icons/CloudDownload';
import { Button, Chip } from '@material-ui/core'; import { Button, Chip } from '@material-ui/core';
interface IExportToPDF { interface IExportToPDF {
listName: string; listName: string;
@ -48,7 +48,7 @@ export function ExportListItemsToPDF(props: IExportToPDF) {
] ]
}, },
layout: { layout: {
fillColor: function (rowIndex: number) { fillColor: (rowIndex: number) =>{
if (oddRowColor && evenRowColor) if (oddRowColor && evenRowColor)
return (rowIndex % 2 === 0) ? evenRowColor : oddRowColor; return (rowIndex % 2 === 0) ? evenRowColor : oddRowColor;
else else

1
samples/react-datatable-using-mui-tables/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter.ts
View File

@ -9,6 +9,7 @@ export function pdfCellFormatter(value: any, type: string) {
break; break;
case 'SP.FieldUser': case 'SP.FieldUser':
value = value.props.displayName; value = value.props.displayName;
break;
default: default:
break; break;
} }

16
samples/react-datatable-using-mui-tables/src/shared/common/Pagination/Pagination.tsx
View File

@ -4,10 +4,10 @@ import styles from "./Pagination.module.scss";
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown'; import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
import { Box, IconButton, TableFooter, TablePagination, TableRow, useTheme } from "@material-ui/core"; import { Box, IconButton, TableFooter, TablePagination, TableRow, useTheme } from "@material-ui/core";
import LastPageIcon from '@material-ui/icons/LastPage' import LastPageIcon from '@material-ui/icons/LastPage';
import FirstPageIcon from '@material-ui/icons/FirstPage' import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight' import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft' import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
export interface IPaginationProps { export interface IPaginationProps {
/** /**
* The page initial selected * The page initial selected
@ -77,12 +77,12 @@ export class Pagination extends React.Component<IPaginationProps, IPaginationSta
}, },
native: true, native: true,
}} }}
onPageChange={(event, page) => { this.onClick(page) }} onPageChange={(event, page) => { this.onClick(page); }}
onRowsPerPageChange={(event) => { this.onRowChange(event) }} onRowsPerPageChange={(event) => { this.onRowChange(event); }}
ActionsComponent={TablePaginationActions} ActionsComponent={TablePaginationActions}
/> />
</TableRow> </TableRow>
</TableFooter>) </TableFooter>);
} }
@ -92,7 +92,7 @@ export class Pagination extends React.Component<IPaginationProps, IPaginationSta
} }
private onRowChange = (event: any) => { private onRowChange = (event: any) => {
let row = parseInt(event.target.value, 10) let row = parseInt(event.target.value, 10);
this.setState({ rowsPerPage: row, currentPage: 0 }); this.setState({ rowsPerPage: row, currentPage: 0 });
this.props.onChange(0, row); this.props.onChange(0, row);
} }

2
samples/react-datatable-using-mui-tables/src/shared/common/RenderProfilePicture/RenderProfilePicture.tsx
View File

@ -16,7 +16,7 @@ export function RenderProfilePicture(props: IProfilePicProps) {
getUserProfileUrl().then(url => { getUserProfileUrl().then(url => {
setProfileUrl(url); setProfileUrl(url);
}); });
}, [props]) }, [props]);
return ( return (
<Persona <Persona

14
samples/react-datatable-using-mui-tables/src/webparts/reactDatatable/components/ReactDatatable.tsx
View File

@ -3,7 +3,7 @@ import styles from './ReactDatatable.module.scss';
import { IReactDatatableProps } from './IReactDatatableProps'; import { IReactDatatableProps } from './IReactDatatableProps';
import { IReactDatatableState } from './IReactDatatableState'; import { IReactDatatableState } from './IReactDatatableState';
import { SPService } from '../../../shared/service/SPService'; import { SPService } from '../../../shared/service/SPService';
import { Row } from '../../../shared/common/ExpandableRow/Row' import { Row } from '../../../shared/common/ExpandableRow/Row';
import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Box, Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Typography } from '@material-ui/core'; import { Box, Grid, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Typography } from '@material-ui/core';
import { Link, SearchBox } from 'office-ui-fabric-react'; import { Link, SearchBox } from 'office-ui-fabric-react';
@ -45,7 +45,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
} }
private getUserProfileUrl = (loginName: string) => { private getUserProfileUrl = (loginName: string) => {
return this._services.getUserProfileUrl(loginName) return this._services.getUserProfileUrl(loginName);
} }
public componentDidUpdate(prevProps: IReactDatatableProps) { public componentDidUpdate(prevProps: IReactDatatableProps) {
@ -103,7 +103,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
break; break;
case 'SP.FieldLookup': case 'SP.FieldLookup':
if (allowMultipleValues) { if (allowMultipleValues) {
let valueArray = value.map(function (obj) { let valueArray = value.map( (obj) =>{
return obj.Title; return obj.Title;
}); });
value = valueArray.join(', '); value = valueArray.join(', ');
@ -235,8 +235,8 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
let filteredItems = this.filterListItems(); let filteredItems = this.filterListItems();
let { list, fields, enableDownloadAsCsv, enableDownloadAsPdf, enablePagination, displayMode, enableSearching, title, evenRowColor, oddRowColor } = this.props; let { list, fields, enableDownloadAsCsv, enableDownloadAsPdf, enablePagination, displayMode, enableSearching, title, evenRowColor, oddRowColor } = this.props;
let { columns, sortingFields, sortDirection } = this.state; let { columns, sortingFields, sortDirection } = this.state;
let currentThis = this let currentThis = this;
columns = columns.filter(column => { return column.name != "Attachments" }); columns = columns.filter(column => { return column.name != "Attachments"; });
let filteredPageItems = enablePagination ? this.paginateFn(filteredItems) : filteredItems; let filteredPageItems = enablePagination ? this.paginateFn(filteredItems) : filteredItems;
return ( return (
@ -282,7 +282,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
<TableSortLabel <TableSortLabel
active={sortingFields === column.key} active={sortingFields === column.key}
direction={sortingFields === column.key ? sortDirection : 'asc'} direction={sortingFields === column.key ? sortDirection : 'asc'}
onClick={() => { this.handleSorting(column.key as string) }} onClick={() => { this.handleSorting(column.key as string); }}
> >
{column.name} {column.name}
</TableSortLabel> </TableSortLabel>
@ -303,6 +303,6 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
onChange={this.handlePaginationChange.bind(this)} /> onChange={this.handlePaginationChange.bind(this)} />
: <></>} : <></>}
</Table> </Table>
</TableContainer></div>) </TableContainer></div>);
} }
} }