-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from fhlavac/table-renderer
- Loading branch information
Showing
29 changed files
with
926 additions
and
328 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; | ||
|
|
||
| interface Repository { | ||
| name: string; | ||
| branches: string | null; | ||
| prs: string | null; | ||
| workspaces: string; | ||
| lastCommit: string; | ||
| } | ||
|
|
||
| const repositories: Repository[] = [ | ||
| { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, | ||
| { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' }, | ||
| { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }, | ||
| { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' }, | ||
| { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' }, | ||
| { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' } | ||
| ]; | ||
| const rows = repositories.map(item => Object.values(item)); | ||
|
|
||
| const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ]; | ||
|
|
||
| describe('DataViewTable', () => { | ||
|
|
||
| it('renders the data view table', () => { | ||
| const ouiaId = 'data'; | ||
|
|
||
| cy.mount( | ||
| <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} /> | ||
| ); | ||
|
|
||
| cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories'); | ||
| cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches'); | ||
| cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests'); | ||
| cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces'); | ||
| cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit'); | ||
|
|
||
| cy.get('[data-ouia-component-id="data-td-0-0"]').contains('one'); | ||
| cy.get('[data-ouia-component-id="data-td-2-1"]').contains('two - 3'); | ||
| cy.get('[data-ouia-component-id="data-td-3-2"]').contains('null'); | ||
| cy.get('[data-ouia-component-id="data-td-4-3"]').contains('four - 5'); | ||
| cy.get('[data-ouia-component-id="data-td-5-4"]').contains('five - 6'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
...patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import { DataViewTable, DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; | ||
| import { ExclamationCircleIcon } from '@patternfly/react-icons'; | ||
| import { Button } from '@patternfly/react-core'; | ||
|
|
||
| interface Repository { | ||
| id: number; | ||
| name: string; | ||
| branches: string | null; | ||
| prs: string | null; | ||
| workspaces: string; | ||
| lastCommit: string; | ||
| } | ||
|
|
||
| const repositories: Repository[] = [ | ||
| { id: 1, name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, | ||
| { id: 2, name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' }, | ||
| { id: 3, name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' }, | ||
| { id: 4, name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' }, | ||
| { id: 5, name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' }, | ||
| { id: 6, name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' } | ||
| ]; | ||
|
|
||
| // you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } } | ||
| const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [ | ||
| { id, cell: workspaces, props: { favorites: { isFavorited: true } } }, | ||
| { cell: <Button href='#' variant='link' isInline>{name}</Button> }, | ||
| branches, | ||
| prs, | ||
| workspaces, | ||
| lastCommit | ||
| ]); | ||
|
|
||
| const columns: DataViewTh[] = [ | ||
| null, | ||
| 'Repositories', | ||
| { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color='var(--pf-v5-global--danger-color--100)'/></> }, | ||
| 'Pull requests', | ||
| { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, | ||
| { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } } | ||
| ]; | ||
|
|
||
| const ouiaId = 'TableExample'; | ||
|
|
||
| export const BasicExample: React.FunctionComponent = () => ( | ||
| <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} /> | ||
| ); |
32 changes: 0 additions & 32 deletions
32
...module/patternfly-docs/content/extensions/data-view/examples/Context/Context.md
This file was deleted.
Oops, something went wrong.
32 changes: 32 additions & 0 deletions
32
...rnfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| --- | ||
| # Sidenav top-level section | ||
| # should be the same for all markdown files | ||
| section: extensions | ||
| subsection: Data view | ||
| # Sidenav secondary level section | ||
| # should be the same for all markdown files | ||
| id: Events context | ||
| # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) | ||
| source: react | ||
| # If you use typescript, the name of the interface to display props for | ||
| # These are found through the sourceProps function provided in patternfly-docs.source.js | ||
| sortValue: 3 | ||
| sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md | ||
| --- | ||
| import { useState, useEffect, useRef, useMemo } from 'react'; | ||
| import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table'; | ||
| import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView'; | ||
| import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; | ||
| import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext'; | ||
| import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core'; | ||
|
|
||
| The **data view events context** provides a way of listening to the data view events from the outside of the component. | ||
|
|
||
| ### Row click subscription example | ||
| The following example demonstrates how to use the `DataViewEventsContext` to manage shared state and handle events. The `DataViewEventsProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer). | ||
|
|
||
|
|
||
| ```js file="./EventsExample.tsx" | ||
|
|
||
| ``` | ||
|
|
Oops, something went wrong.