{"id":28578439,"url":"https://github.com/powerappsdarren/pcf-dataset-html-table","last_synced_at":"2025-06-11T01:10:19.405Z","repository":{"id":293686641,"uuid":"984761644","full_name":"PowerAppsDarren/PCF-Dataset-HTML-Table","owner":"PowerAppsDarren","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-16T15:38:35.000Z","size":77,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T16:33:24.497Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PowerAppsDarren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-16T13:15:10.000Z","updated_at":"2025-05-16T15:38:39.000Z","dependencies_parsed_at":"2025-05-16T16:36:04.727Z","dependency_job_id":"3bd523d0-7803-45cb-a658-80e273280722","html_url":"https://github.com/PowerAppsDarren/PCF-Dataset-HTML-Table","commit_stats":null,"previous_names":["powerappsdarren/pcf-dataset-html-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerAppsDarren%2FPCF-Dataset-HTML-Table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerAppsDarren%2FPCF-Dataset-HTML-Table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerAppsDarren%2FPCF-Dataset-HTML-Table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerAppsDarren%2FPCF-Dataset-HTML-Table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PowerAppsDarren","download_url":"https://codeload.github.com/PowerAppsDarren/PCF-Dataset-HTML-Table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerAppsDarren%2FPCF-Dataset-HTML-Table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259178542,"owners_count":22817389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-11T01:10:12.601Z","updated_at":"2025-06-11T01:10:19.397Z","avatar_url":"https://github.com/PowerAppsDarren.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PCF-Dataset-HTML-Table\n\n\n\n\n## Step 01: Create and Scaffold the Project\n\n```PowerShell\npac pcf init --namespace YOUR_NAMESPACE_HERE --name YOUR_PCF_COMPONENT_NAME --template dataset --framework None\n\n# Darrens Example\n# pac pcf init --namespace SuperPowerLabs --name PCFHTMLTable --template dataset --framework None\n\n# Install Needed NPM\nnpm install\n```\n\n## Step 02: Recognize Key Files/Folders\n\nTake a look around at what's been created!\n\n## Step 03: Add the **Items** Dataset Property\n\n- In `ControlManifest.Input.xml`, replace the default `\u003cdata-set…\u003e` node with:  \n  \n```xml\n\u003cdata-set name=\"Items\" display-name-key=\"Items\" /\u003e\n```  \n\n```PowerShell\nnpm run refreshTypes\n```\n\nThis registers a binding identical in spirit to the Gallery’s **Items** property, allowing makers to point the control at any table or collection.\n\nDataset properties bring \n- Paging \n- Sorting\n- Selected record tracking\n- Automatic schema discovery—capabilities \n\n...a Dataset type of control relies on behind the scenes. Using the same pattern keeps learning curves low for non-coders migrating to PCF.\n\n## Step 04: Other Properties are Needed \n\nProperties that would be appropriate for a control like this!\n\n- ShowGridLines \n- GridLineThickness\n\n```xml\n\u003cproperty name=\"ShowGridLines\"\n        of-type=\"TwoOptions.YesNo\"\n        display-name-key=\"ShowGridLines\"        \n        usage=\"input\"\n        default-value=\"true\" /\u003e\n\u003cproperty name=\"GridLineThickness\"\n        of-type=\"Whole.None\"\n        display-name-key=\"GridLineThickness\"\n        usage=\"input\"\n        default-value=\"1\" /\u003e\n\u003cproperty name=\"SelectedRecordId\"\n        of-type=\"SingleLine.Text\"\n        usage=\"output\" /\u003e\n```  \n\n- TwoOptions renders a true/false toggle in Studio\n- Whole.None provides an integer slider\n\n\u003eConsider: canvas app makers will see friendly toggle and number pickers in the right-hand pane of Power Apps Studio, mirroring component custom properties they already use inside Canvas components\n\n## Step 05: Render the HTML Table\n\n- Build the skeleton in `updateView`\n    - Replace the generated body with code that \n      - Creates a `\u003ctable\u003e` \n      - Iterates `context.parameters.Items.sortedRecordIds`, \n      - Builds a `\u003cthead\u003e` from dataset columns \n      - A `\u003ctbody\u003e` from row values using `getFormattedValue()`. \n    - This mirrors the implicit templating engine of Gallery but in raw DOM calls. \n\n- Respect property inputs\n    - Conditionally apply a `table { border-collapse:collapse; }` style block only when `context.parameters.ShowGridLines.raw` is true. \n\n- Example usage in Canvas\n    - After importing, set ShowGridLines to `false` when embedding the table in a minimalist dashboard where cell borders feel noisy, or set GridLineThickness to `3` to create bold separators for a read-only finance matrix without formula tinkering.\n\n## Step 06: Wire Outputs for Interactivity\n\n- Provide a SelectedRecordId output\n    - Add an output property so makers can capture row clicks:  \n\n```xml\n\u003cproperty name=\"SelectedRecordId\"\n        of-type=\"SingleLine.Text\"\n        usage=\"output\" /\u003e\n```  \n\nCall `notifyOutputChanged()` when a user clicks a row and store `recordId` locally. Makers can then write `Set(varOrderId, HtmlTableLab.SelectedRecordId)` exactly like they would with a Gallery’s `Selected` record. \n\n## Step 07: Build \u0026 Test Locally\n\n- Compile and run the `TEST HARNESS`\n    - Execute `npm run build` then `npm start`. \n    - The harness uses sample data to preview the grid, letting you toggle the custom properties live without publishing. This rapid loop echoes Play mode inside Canvas apps.\n\n```PowerShell\nnpm run build\nnpm start\n```\n\n  - Debug tips\n      - Use `console.log` statements to inspect property values and browser DevTools to tweak CSS on the fly, speeding up pixel-perfect adjustments before deployment. \n\n\n## Step 08: Deploy to Your Environment\n\n- Push directly from the CLI\n    - From the project root run `pac pcf push` to package, upload, and register the control in your default solution. This skips building a managed solution for classroom speed. \n\n- Import into a Canvas app\n    - Open Power Apps Studio \n    - ➜ **Insert → Get more components → Code** and add **HtmlTableLab**. \n    - Drop it onto the screen, set **Items** to `Gallery1.AllItems` or any collection (`ClearCollect(colPeople, People)`), and experiment with the new properties.\n\n```PowerShell\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowerappsdarren%2Fpcf-dataset-html-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpowerappsdarren%2Fpcf-dataset-html-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowerappsdarren%2Fpcf-dataset-html-table/lists"}