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.

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

Added isSortable to Datagrid columns #2952

Merged
merged 9 commits into from
Mar 1, 2020
Merged

Added isSortable to Datagrid columns #2952

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2a758cb
Added isSorting to data_grid_types
ashikmeerankutty Feb 29, 2020
40ea9fb
do not display column in filter if isSortable is false
ashikmeerankutty Feb 29, 2020
b88beb5
added isSorted = false in docs
ashikmeerankutty Feb 29, 2020
abebd5f
update in changelog
ashikmeerankutty Feb 29, 2020
95c090c
Added isSortable flag to EuiDataGridSchemaDetector
ashikmeerankutty Feb 29, 2020
3594836
Fixed empty sortable columns popover
ashikmeerankutty Feb 29, 2020
1b08726
Removed unwanted return
ashikmeerankutty Feb 29, 2020
d6c69ec
Fixes in empty sortable popover
ashikmeerankutty Feb 29, 2020
f566ae0
Added isSortable in data grid test
ashikmeerankutty Feb 29, 2020
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added `isSortable` props to `EuiDataGridColumn` and `EuiDataGridSchemaDetector` to mark them as un-sortable ([#2952](https://github.com/elastic/eui/pull/2952))
- Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))
- Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
- Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))
Expand Down
1 change: 1 addition & 0 deletions src-docs/src/views/datagrid/datagrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const columns = [
},
{
id: 'phone',
isSortable: false,
},
{
id: 'version',
Expand Down
104 changes: 56 additions & 48 deletions src/components/datagrid/column_sorting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,12 @@ export const useColumnSorting = (

const numberOfSortedFields = sorting.columns.length;

const inactiveSortableColumns = inactiveColumns.filter(({ id, isSortable }) =>
schema.hasOwnProperty(id) && schema[id].columnType != null
? getDetailsForSchema(schemaDetectors, schema[id].columnType).isSortable
: isSortable !== false
);

const columnSorting = (
<EuiPopover
data-test-subj="dataGridColumnSortingPopover"
Expand Down Expand Up @@ -165,7 +171,7 @@ export const useColumnSorting = (
justifyContent="spaceBetween"
responsive={false}>
<EuiFlexItem grow={false}>
{inactiveColumns.length > 0 && (
{inactiveSortableColumns.length > 0 && (
ashikmeerankutty marked this conversation as resolved.
Show resolved Hide resolved
<EuiPopover
data-test-subj="dataGridColumnSortingPopoverColumnSelection"
isOpen={avilableColumnsisOpen}
Expand Down Expand Up @@ -195,53 +201,55 @@ export const useColumnSorting = (
<div
className="euiDataGridColumnSorting__fieldList"
role="listbox">
{inactiveColumns.map(({ id }) => (
<button
key={id}
className="euiDataGridColumnSorting__field"
aria-label={`${sortFieldAriaLabel} ${id}`}
role="option"
aria-selected="false"
data-test-subj={`dataGridColumnSortingPopoverColumnSelection-${id}`}
onClick={() => {
const nextColumns = [...sorting.columns];
nextColumns.push({ id, direction: 'asc' });
sorting.onSort(nextColumns);
}}>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
component="span">
<EuiFlexItem grow={false}>
<EuiToken
iconType={
schema.hasOwnProperty(id) &&
schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).icon
: 'tokenString'
}
color={
schema.hasOwnProperty(id) &&
schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).color
: undefined
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="xs">
<span>{id}</span>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</button>
))}
{inactiveSortableColumns.map(({ id }) => {
return (
<button
key={id}
className="euiDataGridColumnSorting__field"
aria-label={`${sortFieldAriaLabel} ${id}`}
role="option"
aria-selected="false"
data-test-subj={`dataGridColumnSortingPopoverColumnSelection-${id}`}
onClick={() => {
const nextColumns = [...sorting.columns];
nextColumns.push({ id, direction: 'asc' });
sorting.onSort(nextColumns);
}}>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
component="span">
<EuiFlexItem grow={false}>
<EuiToken
iconType={
schema.hasOwnProperty(id) &&
schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).icon
: 'tokenString'
}
color={
schema.hasOwnProperty(id) &&
schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).color
: undefined
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="xs">
<span>{id}</span>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</button>
);
})}
</div>
)}
</EuiI18n>
Expand Down
9 changes: 9 additions & 0 deletions src/components/datagrid/data_grid_schema.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ export interface EuiDataGridSchemaDetector {
* Text for how to represent a descending sort of this data type, e.g. 'Z -> A'
*/
sortTextDesc: ReactNode;
/**
* Whether this column is sortable
*/
isSortable: boolean;
}

const numericChars = new Set([
Expand Down Expand Up @@ -83,6 +87,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
default="False-True"
/>
),
isSortable: true,
},
{
type: 'currency',
Expand Down Expand Up @@ -124,6 +129,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
default="High-Low"
/>
),
isSortable: true,
},
{
type: 'datetime',
Expand Down Expand Up @@ -156,6 +162,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
sortTextDesc: (
<EuiI18n token="euiDataGridSchema.dateSortTextDesc" default="Old-New" />
),
isSortable: true,
},
{
type: 'numeric',
Expand Down Expand Up @@ -196,6 +203,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
default="High-Low"
/>
),
isSortable: true,
},
{
type: 'json',
Expand Down Expand Up @@ -230,6 +238,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
default="Large-Small"
/>
),
isSortable: true,
},
];

Expand Down
4 changes: 4 additions & 0 deletions src/components/datagrid/data_grid_types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ export interface EuiDataGridColumn {
* Initial width (in pixels) of the column
*/
initialWidth?: number;
/**
* Whether this column is sortable
*/
isSortable?: boolean;
}

export interface EuiDataGridColumnVisibility {
Expand Down