Skip to content
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.

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

Final tables PR: cleanup, tests, stories #7642

Merged
merged 14 commits into from
Apr 5, 2024
Merged
Show file tree
Hide file tree
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
15 changes: 15 additions & 0 deletions changelogs/upcoming/7642.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
**Bug fixes**

- Table `mobileOptions`:
- `mobileOptions.align` is now respected instead of all cells being forced to left alignment
- `textTruncate` and `textOnly` are now respected even if a `render` function is not passed

**Breaking changes**

- Removed top-level `textOnly` prop from `EuiBasicTable` and `EuiInMemoryTable`. Use `columns[].textOnly` instead.

**DOM changes**

- `EuiTableRowCell` no longer renders mobile headers to the DOM unless the current table is displaying its responsive view.
- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on mobile if their columns' `mobileOptions.show` is set to `false`.
- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on desktop if their columns' `mobileOptions.only` is set to `true`.
6 changes: 3 additions & 3 deletions src-docs/src/views/tables/actions/actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
sortable: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down Expand Up @@ -202,7 +202,7 @@ export default () => {
if (multiAction) {
actions = [
{
name: <span>Clone</span>,
name: <>Clone</>,
description: 'Clone this user',
icon: 'copy',
type: 'icon',
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/auto/auto.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ const columns: Array<EuiTableFieldDataColumnType<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/basic/basic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ export default () => {
'data-test-subj': 'firstNameCell',
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
8 changes: 5 additions & 3 deletions src-docs/src/views/tables/basic/basic_section.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import { DefaultItemActionProps as DefaultItemAction } from '../props/props';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
} from '../props/props';

const source = require('!!raw-loader!./basic');

Expand Down
12 changes: 6 additions & 6 deletions src-docs/src/views/tables/custom/custom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,10 @@ export default class extends Component<{}, State> {
{
id: 2,
title: (
<span>
<>
A very long line in an ELEMENT which will wrap on narrower screens and
NOT become truncated and replaced by an ellipsis
</span>
</>
),
type: 'user',
dateCreated: 'Tue Dec 01 2016',
Expand All @@ -127,11 +127,11 @@ export default class extends Component<{}, State> {
id: 3,
title: {
value: (
<span>
<>
A very long line in an ELEMENT which will not wrap on narrower
screens and instead will become truncated and replaced by an
ellipsis
</span>
</>
),
truncateText: true,
},
Expand Down Expand Up @@ -290,14 +290,14 @@ export default class extends Component<{}, State> {
width: '100%',
},
render: (title: DataItem['title'], item: DataItem) => (
<span>
<>
<EuiIcon
type={item.type}
size="m"
style={{ verticalAlign: 'text-top' }}
/>{' '}
{title as ReactNode}
</span>
</>
),
},
{
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/custom/custom_section.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const section = {
},
],
text: (
<div>
<>
<p>
As an alternative to <strong>EuiBasicTable</strong> you can instead
construct a table from individual{' '}
Expand Down Expand Up @@ -58,7 +58,7 @@ export const section = {
&nbsp;and <strong>EuiTableSortMobileItem</strong> components to supply
mobile sorting. See demo below.
</p>
</div>
</>
),
components: { EuiTable },
props: {
Expand Down
7 changes: 4 additions & 3 deletions src-docs/src/views/tables/expanding_rows/expanding_rows.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down Expand Up @@ -134,9 +134,10 @@ export default () => {
isExpander: true,
name: (
<EuiScreenReaderOnly>
<span>Expand rows</span>
<span>Expand row</span>
</EuiScreenReaderOnly>
),
mobileOptions: { header: false },
render: (user: User) => {
const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };

Expand Down
12 changes: 5 additions & 7 deletions src-docs/src/views/tables/footer/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand All @@ -72,7 +72,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
{
field: 'github',
name: 'Github',
footer: ({ items }: { items: User[] }) => <span>{items.length} users</span>,
footer: ({ items }: { items: User[] }) => <>{items.length} users</>,
render: (username: User['github']) => (
<EuiLink href="#" target="_blank">
{username}
Expand All @@ -96,7 +96,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
const uniqueCountries = new Set(
items.map((user) => user.location.country)
);
return <span>{uniqueCountries.size} countries</span>;
return <>{uniqueCountries.size} countries</>;
},
render: (location: User['location']) => {
return `${location.city}, ${location.country}`;
Expand All @@ -106,9 +106,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
field: 'online',
name: 'Online',
footer: ({ items }: { items: User[] }) => {
return (
<span>{items.filter((user: User) => !!user.online).length} online</span>
);
return <>{items.filter((user: User) => !!user.online).length} online</>;
},
dataType: 'boolean',
render: (online: User['online']) => {
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/in_memory/in_memory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
SearchProps as Search,
SearchFilterConfigProps as SearchFilterConfig,
Expand All @@ -37,22 +37,22 @@ export const controlledPaginationSection = {
},
],
text: (
<div>
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
<>
<p>
By default <EuiCode>EuiInMemoryTable</EuiCode> resets its page index
when receiving a new <EuiCode>EuiInMemoryTable</EuiCode> array. To avoid
this behavior the pagination object optionally takes a
this behavior the pagination object optionally takes a{' '}
<EuiCode>pageIndex</EuiCode> value to control this yourself.
Additionally, <EuiCode>pageSize</EuiCode> can also be controlled the
same way. Both of these are provided to your app during the
same way. Both of these are provided to your app during the{' '}
<EuiCode>onTableChange</EuiCode> callback.
</p>
<p>
The example below updates the array of users every second, randomly
toggling their online status. Pagination state is maintained by the app,
preventing it from being reset by the updates.
</p>
</div>
</>
),
props: {
EuiInMemoryTable,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
SearchProps as Search,
SearchFilterConfigProps as SearchFilterConfig,
Expand All @@ -37,16 +37,14 @@ export const customSortingSection = {
},
],
text: (
<div>
<p>
Sometimes the value displayed in a column is not appropriate to use for
sorting, such as pre-formatting values to be human-readable. In these
cases it&apos;s possible to pass the <EuiCode>sortable</EuiCode> prop as
a function instead of <EuiCode>true</EuiCode> or{' '}
<EuiCode>false</EuiCode>. The function is used to extract or calculate
the intended sort value for each <EuiCode>item</EuiCode>.
</p>
</div>
<p>
Sometimes the value displayed in a column is not appropriate to use for
sorting, such as pre-formatting values to be human-readable. In these
cases it&apos;s possible to pass the <EuiCode>sortable</EuiCode> prop as a
function instead of <EuiCode>true</EuiCode> or <EuiCode>false</EuiCode>.
The function is used to extract or calculate the intended sort value for
each <EuiCode>item</EuiCode>.
</p>
),
props: {
EuiInMemoryTable,
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/in_memory/in_memory_search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
SearchProps as Search,
SearchFilterConfigProps as SearchFilterConfig,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
SearchProps as Search,
SearchFilterConfigProps as SearchFilterConfig,
Expand All @@ -36,12 +36,10 @@ export const searchExternalSection = {
},
],
text: (
<div>
<p>
The example shows how to configure <strong>EuiInMemoryTable</strong>{' '}
when both external and internal search/filter states are in use.
</p>
</div>
<p>
The example shows how to configure <strong>EuiInMemoryTable</strong> when
both external and internal search/filter states are in use.
</p>
),
props: {
EuiInMemoryTable,
Expand Down
Loading