Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions packages/react-table/src/demos/Table.md
Original file line number Diff line number Diff line change
Expand Up @@ -3045,20 +3045,20 @@ class EmptyStateDemo extends React.Component {

### Loading

```js
```js isFullscreen
import React from 'react';
import { Bullseye, Spinner } from '@patternfly/react-core';
import { Table, TableHeader, TableBody } from '@patternfly/react-table';
import { Bullseye, Card, EmptyState, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core';
import { PageSection, Table, TableHeader, TableBody } from '@patternfly/react-table';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';

class LoadingStateDemo extends React.Component {
render() {
const columns = [
{ title: 'Servers' },
{ title: 'Threads' },
{ title: 'Applications' },
{ title: 'Repositories' },
{ title: 'Branches' },
{ title: 'Pull requests' },
{ title: 'Workspaces' },
{ title: 'Status' },
{ title: 'Location' }
{ title: 'Last commit' }
];
const rows = [
{
Expand All @@ -3068,7 +3068,12 @@ class LoadingStateDemo extends React.Component {
props: { colSpan: 8 },
title: (
<Bullseye>
<Spinner size="xl" aria-labelledby="loading-table-demo" />
<EmptyState>
<EmptyStateIcon variant="container" component={Spinner} />
<Title size="lg" headingLevel="h2">
Loading
</Title>
</EmptyState>
</Bullseye>
)
}
Expand All @@ -3077,10 +3082,16 @@ class LoadingStateDemo extends React.Component {
];

return (
<Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
<TableHeader />
<TableBody />
</Table>
<DashboardWrapper hasPageTemplateTitle>
<PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
<Card component="div">
<Table cells={columns} rows={rows} aria-label="Loading table demo">
<TableHeader />
<TableBody />
</Table>
</Card>
</PageSection>
</DashboardWrapper>
);
}
}
Expand Down