FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Add various table state demos by nicolethoen · Pull Request #3352 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

Add various table state demos #3352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dlabaj merged 2 commits into from
Dec 4, 2019
Conversation 6 Commits 2 Checks 0 Files changed
Merged

Add various table state demos #3352

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d06d80a
Add various table state demos
nicolethoen Nov 25, 2019
381d513
change demo name to Table Empty States and add experimental tag becau…
nicolethoen Dec 2, 2019
File filter

Filter by extension

Filter by extension .md  (1) All 1 file type selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
161 changes: 161 additions & 0 deletions packages/patternfly-4/react-core/src/demos/TableEmptyStatesDemo.md
Show comments
View file
Open in desktop
This file contains hidden or 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
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
---
title: 'Table Empty States'
section: 'demos'
experimentalStage: 'early'
---

## Examples

import React from 'react';
import {
EmptyState,
EmptyStateIcon,
EmptyStateBody,
EmptyStateSecondaryActions,
Bullseye
} from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import { Table, TableHeader, TableBody} from '@patternfly/react-table';

```js title=Empty
import React from 'react';
import {
EmptyState,
EmptyStateIcon,
EmptyStateBody,
EmptyStateSecondaryActions,
Bullseye
} from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import { Table, TableHeader, TableBody} from '@patternfly/react-table';

class EmptyStateDemo extends React.Component {

render() {

const columns = [
{ title: 'Servers' },
{ title: 'Threads' },
{ title: 'Applications' },
{ title: 'Workspaces' },
{ title: 'Status' },
{ title: 'Location' }
]

const rows = [];

return (
<React.Fragment>
<Table cells={columns} rows={rows} aria-label="Empty state demo">
<TableHeader />
<TableBody />
</Table>
<Bullseye>
<EmptyState>
<EmptyStateIcon icon={SearchIcon} />
<Title headingLevel="h5" size="lg">
No results found
</Title>
<EmptyStateBody>
No results match this filter criteria. Remove all filters or clear all filters to show results.
</EmptyStateBody>
<EmptyStateSecondaryActions>
<Button variant="link" onClick={() => {}}>
Clear all filters
</Button>
</EmptyStateSecondaryActions>
</EmptyState>
</Bullseye>
</React.Fragment>
);
}
}
```

```js title=Loading
import React from 'react';

class LoadingStateDemo extends React.Component {

render() {

const columns = [
{ title: 'Servers' },
{ title: 'Threads' },
{ title: 'Applications' },
{ title: 'Workspaces' },
{ title: 'Status' },
{ title: 'Location' }
]
const rows = [{
heightAuto: true,
cells: [
{
props: { colSpan: 8 },
title: (
<Bullseye>
<center><Spinner size="xl"/></center>
</Bullseye>
)
},
]
}];

return (
<Table cells={columns} rows={rows} aria-label="Loading Table Demo">
<TableHeader />
<TableBody />
</Table>
);
}
}

```

```js title=Error
import React from 'react';

class LoadingStateDemo extends React.Component {

render() {

const columns = [
{ title: 'Servers' },
{ title: 'Threads' },
{ title: 'Applications' },
{ title: 'Workspaces' },
{ title: 'Status' },
{ title: 'Location' }
]
const rows = [{
heightAuto: true,
cells: [
{
props: { colSpan: 8 },
title: (
<Bullseye>
<EmptyState variant={EmptyStateVariant.small}>
<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />
<Title headingLevel="h2" size="lg">
Unable to connect
</Title>
<EmptyStateBody>
There was an error retrieving data. Check your connection and try again.
</EmptyStateBody>
</EmptyState>
</Bullseye>
)
},
]
}];

return (
<Table cells={columns} rows={rows} aria-label="Error Table Demo">
<TableHeader />
<TableBody />
</Table>
);
}
}

```
Back | FazBrowse Home | New Git URL