{"id":20923787,"url":"https://github.com/patternfly/react-data-view","last_synced_at":"2026-01-22T00:17:46.619Z","repository":{"id":232999717,"uuid":"785284898","full_name":"patternfly/react-data-view","owner":"patternfly","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-03T02:51:34.000Z","size":29546,"stargazers_count":3,"open_issues_count":12,"forks_count":13,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-12-04T03:38:02.759Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","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/patternfly.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-11T15:19:09.000Z","updated_at":"2025-12-01T16:31:07.000Z","dependencies_parsed_at":"2024-05-14T09:56:12.492Z","dependency_job_id":"78509e5d-4760-45ee-aff1-32e63d3820e6","html_url":"https://github.com/patternfly/react-data-view","commit_stats":null,"previous_names":["patternfly/react-data-view"],"tags_count":55,"template":false,"template_full_name":null,"purl":"pkg:github/patternfly/react-data-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-data-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-data-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-data-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-data-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly","download_url":"https://codeload.github.com/patternfly/react-data-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Freact-data-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28647980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T21:29:11.980Z","status":"ssl_error","status_checked_at":"2026-01-21T21:24:31.872Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hacktoberfest"],"created_at":"2024-11-18T20:17:44.463Z","updated_at":"2026-01-22T00:17:46.606Z","avatar_url":"https://github.com/patternfly.png","language":"TypeScript","readme":"# PatternFly Data view\n\nThis repo contains React Data view implementation. \n\n### Branches\n`main` - PatternFly 6 implementation\n\n`v5` - PatternFly 5 implementation\n  \n\u003e NOTE: In the case of data view, new features are currently primarily added to `v5` branch to be consumed by Red Hat projects, still using PatternFly 5. In the follow-up step, they should be mirrored to the `main` branch. For bug fixes, it is preferred to fix the bug for both versions (fix in one branch and cherry-pick to another). Pulling new changes from 5 to 6 and vice versa is not recommended using `rebase`. Rather, always cherry-pick specific commits to avoid getting lost in unnecessary conflicts.\n\n---\n\n## Contribution guide\n\n### AI-assisted development guidelines\n\nPlease reference [PatternFly's AI-assisted development guidelines](https://github.com/patternfly/.github/blob/main/CONTRIBUTING.md) if you'd like to contribute code generated using AI.\n\n### To add a data view sub-component:\n1. create a folder in `src/` matching its name (for example `src/MyComponent`)\n2. to the new folder add a new `.tsx` file named after the component (for example `src/MyComponent/MyComponent.tsx`)\n3. to the same folder include an `index.ts` which will export the component as a default and then all necessary interfaces\n4. if this file structure is not met, your component won't be exposed correctly\n\n#### Example component:   \n```\nimport * as React from 'react';\nimport { Text } from '@patternfly/react-core';\nimport { createUseStyles } from 'react-jss';\n\n// do not forget to export your component's interface\n// always place the component's interface above the component itself in the code\nexport interface MyComponentProps {\n  text: String;\n}\n\nconst useStyles = createUseStyles({\n  myText: {\n    fontFamily: 'monospace',\n    fontSize: 'var(--pf-v6-global--icon--FontSize--md)',\n  },\n})\n\n// do not use the named export of your component, just a default one\nconst MyComponent: React.FunctionComponent\u003cMyComponentProps\u003e = () =\u003e {\n  const classes = useStyles();\n\n  return (\n    \u003cText className={classes.myText}\u003e\n      This is my new component\n    \u003c/Text\u003e\n  );\n};\n\nexport default MyComponent;\n``` \n\n#### Index file example:\n```\nexport { default } from './MyComponent';\nexport * from './MyComponent';\n``` \n\n#### Component directory structure example:\n```\nsrc\n|- MyComponent\n   |- index.ts\n   |- MyComponent.tsx\n``` \n\n### Component's API rules:\n- prop names comply with PatternFly components naming standards (`variant`, `onClick`, `position`, etc.)\n- the API is maximally simplified and all props are provided with a description\n- it is built on top of existing PatternFly types without prop omitting\n- it is well documented using the PatternFly documentation (`/packages/module/patternfly-docs/content/extensions/data-view/examples/MyComponent/MyComponent.md`) with examples of all possible use cases (`packages/module/patternfly-docs/content/extensions/data-view/examples/MyComponent/MyComponent[...]Example.tsx`)\n\n#### Component API definition example:\n```\n// when possible, extend available PatternFly types\nexport interface MyComponentProps extends ButtonProps {\n    customLabel: Boolean\n};\n\nexport const MyComponent: React.FunctionComponent\u003cMyComponentProps\u003e = ({ customLabel, ...props }) =\u003e ( ... );\n```\n\n#### Markdown file example:\n```\n---\nsection: extensions\nsubsection: Data view\nid: MyComponent\npropComponents: ['MyComponent']\nsourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/MyComponent/MyComponent.md\n---\n\nimport MyComponent from \"@patternfly/react-data-view/dist/dynamic/MyComponent\";\n\n## Component usage\n\nMyComponent has been created to demo contributing to this repository.\n\n### MyComponent component example label\n\n```js file=\"./MyComponentExample.tsx\"```\n\n```\n\n#### Component usage file example: (`MyComponentExample.tsx`)\n```\nimport React from 'react';\n\nconst MyComponentExample: React.FunctionComponent = () =\u003e (\n  \u003cMyComponent customLabel=\"My label\"\u003e\n);\n\nexport default MyComponentExample;\n```\n\n### Sub-components:\nWhen adding a component for which it is advantageous to divide it into several sub-components make sure: \n- component and all its sub-components are located in separate files and directories straight under the `src/` folder\n- sub-components are exported and documented separately from their parent\n- parent component should provide a way to pass props to all its sub-components\n\nThe aim is to enable the user of our \"complex\" component to use either complete or take advantage of its sub-components and manage their composition independently.\n\n### Testing:\nWhen adding/making changes to a component, always make sure your code is tested:\n- use React Testing Library for unit testing \n- add unit tests to a `[ComponentName].test.tsx` file to your component's directory\n- make sure all the core functionality is covered using Cypress component or E2E tests\n- add component tests to `cypress/component/[ComponentName].cy.tsx` file and E2E tests to `cypress/e2e/[ComponentName].spec.cy.ts`\n- add `ouiaId` to component props definition with a default value of the component name (for subcomponents, let's use `ComponentName-element-specification` naming convention e.g. `ouiaId=\"DataView-actions-button\"`)\n\n### Styling:\n- for styling always use JSS\n- new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.)\n- do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css)\n\n---\n\n## Building for production\n- run `npm install`\n- run `npm run build`\n\n## Development\n- run `npm install`\n- run `npm run start` to build and start the development server\n\n## Testing and Linting\n- run `npm run test` to run the unit tests\n- run `cypress:run:ci:cp` to run component tests\n- run `cypress:run:ci:e2e` to run E2E tests\n- run `npm run lint` to run the linter\n\n## A11y testing\n- run `npm run build:docs` followed by `npm run serve:docs`, then run `npm run test:a11y` in a new terminal window to run our accessibility tests. Once the accessibility tests have finished running you can run `npm run serve:a11y` to locally view the generated report\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Freact-data-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly%2Freact-data-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Freact-data-view/lists"}