Skip to content

Datagrid toolbar #4

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
cee-chen merged 7 commits into from
Nov 8, 2021
Merged

Datagrid toolbar #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7b9109d
Update some props comments and fix popover’s responsiveness
Nov 8, 2021
1c9d899
[Design] Remove a few extraneous style overrides to control buttons
Nov 8, 2021
3a2a221
Fixed add/remove of fullscreen body class
Nov 8, 2021
8745217
Added tooltips around icon buttons with long delay
Nov 8, 2021
10bc8c2
Updated examples and snippets with “real world” examples
Nov 8, 2021
2e43c54
More responsive fixes
Nov 8, 2021
22d85f9
Change class name
Nov 8, 2021
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
127 changes: 0 additions & 127 deletions src-docs/src/views/datagrid/additional_controls.js
View file
Open in desktop

This file was deleted.

197 changes: 197 additions & 0 deletions src-docs/src/views/datagrid/additional_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import React, { useState, useCallback, Fragment } from 'react';

// @ts-ignore Importing from JS
import { fake } from 'faker';

import {
EuiDataGrid,
EuiButtonEmpty,
EuiButtonIcon,
EuiLink,
EuiToolTip,
useGeneratedHtmlId,
EuiFlyout,
EuiFlyoutBody,
EuiFlyoutHeader,
EuiText,
EuiTitle,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiPopover,
} from '../../../../src';

const columns = [
{
id: 'name',
},
{
id: 'email',
},
{
id: 'city',
},
{
id: 'country',
},
{
id: 'account',
},
];

const data: any[] = [];

for (let i = 1; i < 20; i++) {
data.push({
name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
email: fake('{{internet.email}}'),
city: (
<EuiLink href="http://google.com">{fake('{{address.city}}')}</EuiLink>
),
country: fake('{{address.country}}'),
account: fake('{{finance.account}}'),
});
}

export default () => {
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const flyoutTitleId = useGeneratedHtmlId({
prefix: 'dataGridAdditionalControlsFlyout',
});

let flyout;
if (isFlyoutVisible) {
flyout = (
<EuiFlyout
onClose={() => setIsFlyoutVisible(false)}
aria-labelledby={flyoutTitleId}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id={flyoutTitleId}>Inspect</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<p>
This is not a real control, just an example of how to trigger a
flyout from a custom data grid control.
</p>
</EuiText>
</EuiFlyoutBody>
</EuiFlyout>
);
}

const [isPopoverOpen, setPopover] = useState(false);
const popoverId = useGeneratedHtmlId({
prefix: 'dataGridAdditionalControlsPopover',
});
const alertAndClosePopover = () => {
setPopover(false);
window.alert('This is not a real control.');
};

const [visibleColumns, setVisibleColumns] = useState(() =>
columns.map(({ id }) => id)
);

const setPageIndex = useCallback(
(pageIndex) => setPagination({ ...pagination, pageIndex }),
[pagination, setPagination]
);
const setPageSize = useCallback(
(pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
[pagination, setPagination]
);

return (
<>
<EuiDataGrid
aria-label="Data grid demo with additional controls"
columns={columns}
columnVisibility={{
visibleColumns: visibleColumns,
setVisibleColumns: setVisibleColumns,
}}
rowCount={data.length}
gridStyle={{
border: 'horizontal',
header: 'underline',
}}
renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
pagination={{
...pagination,
pageSizeOptions: [5, 10, 25],
onChangeItemsPerPage: setPageSize,
onChangePage: setPageIndex,
}}
toolbarVisibility={{
additionalControls: {
left: (
<EuiPopover
id={popoverId}
button={
<EuiButtonEmpty
size="xs"
iconType="download"
onClick={() => setPopover((open) => !open)}
>
Download
</EuiButtonEmpty>
}
isOpen={isPopoverOpen}
closePopover={() => setPopover(false)}
panelPaddingSize="none"
>
<EuiContextMenuPanel
size="s"
items={[
<EuiContextMenuItem
key="csv"
onClick={alertAndClosePopover}
>
CSV
</EuiContextMenuItem>,
<EuiContextMenuItem
key="jsonedit"
onClick={alertAndClosePopover}
>
JSON
</EuiContextMenuItem>,
]}
/>
</EuiPopover>
),
right: (
<Fragment>
<EuiToolTip
title="Updated 3 min ago"
content="Click to refresh"
>
<EuiButtonIcon
aria-label="Refresh grid data"
size="xs"
iconType="refresh"
onClick={() => {
window.alert('This is not a real control.');
}}
/>
</EuiToolTip>
<EuiToolTip content="Inspect grid data">
<EuiButtonIcon
aria-label="Inspect grid data"
size="xs"
iconType="inspect"
onClick={() => setIsFlyoutVisible(true)}
/>
</EuiToolTip>
</Fragment>
),
},
}}
/>
{flyout}
</>
);
};
Loading