Skip to content

Commit

Permalink
feat(DataTable): add support for table row statuses
Browse files Browse the repository at this point in the history
- component to support standard EDS statuses per row
- update tests and snapshots (new story for comparison)
  • Loading branch information
booc0mtaco committed Oct 18, 2024
1 parent 7ffbd56 commit 410279c
Show file tree
Hide file tree
Showing 6 changed files with 1,336 additions and 24 deletions.
50 changes: 50 additions & 0 deletions src/components/DataTable/DataTable.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,28 @@
}
}

.data-table__status-cell {
text-align: center;

.data-table--size-md & {
padding: calc(var(--eds-size-2) / 16 * 1rem)
calc(var(--eds-size-3) / 16 * 1rem);
}
.data-table--size-sm & {
padding: calc(var(--eds-size-half) / 16 * 1rem)
calc(var(--eds-size-1) / 16 * 1rem);
}
}

.data-table__status-header-cell {
/* display: none; */
/* visibility: hidden; */
height: 1px;
width: 1px;
overflow: hidden;
text-indent: 9999;
}

.data-table__cell {
display: flex;
gap: calc(var(--eds-size-1) / 16 * 1rem);
Expand Down Expand Up @@ -288,3 +310,31 @@
background-color: var(--eds-theme-color-background-utility-interactive-low-emphasis);
}
}

.data-table .data-table__status-cell {
&.data-table--status-critical {
color: var(--eds-theme-color-icon-utility-critical)
}

&.data-table--status-favorable {
color: var(--eds-theme-color-icon-utility-favorable);
}

&.data-table--status-warning {
color: var(--eds-theme-color-icon-utility-warning);
}
}

.data-table .data-table__row {
&.data-table--status-critical {
background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
}

&.data-table--status-favorable {
background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
}

&.data-table--status-warning {
background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
}
}
96 changes: 96 additions & 0 deletions src/components/DataTable/DataTable.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
// We import all of the utilities from tanstack here, and this can contain other custom utilities
import { Button, Menu, Checkbox, DataTableUtils } from '../..';

import type { Status } from '../../util/variant-types';
import { chromaticViewports } from '../../util/viewports';

export default {
Expand Down Expand Up @@ -59,6 +60,8 @@ type Person = {
age: number;
visits: number;
progress: number;
// This column is used for tables that are eligible for status
status?: Extract<Status, 'critical' | 'favorable' | 'warning'>;
};

// Specifying the example (static) data for the table to use with tanstack primitives
Expand All @@ -76,6 +79,7 @@ const defaultData: Person[] = [
age: 40,
visits: 40,
progress: 80,
status: 'warning',
},
{
firstName: 'Tanner',
Expand All @@ -90,6 +94,7 @@ const defaultData: Person[] = [
age: 45,
visits: 20,
progress: 10,
status: 'critical',
},
{
firstName: 'Tandy',
Expand All @@ -111,6 +116,7 @@ const defaultData: Person[] = [
age: 45,
visits: 20,
progress: 10,
status: 'favorable',
},
{
firstName: 'Tandy',
Expand Down Expand Up @@ -700,6 +706,96 @@ export const Grouping: StoryObj<Args> = {
},
};

/**
* You can specify detailed statuses for each row in a table, matching a few common options.
* Extend the data type to include `status` which maps to the internal type
*
* Use the Utility type StatusDataTable (TODO-AH)
*
* TODO:
* - should indent table caption and subcaption to align to status column?
*/
export const StatusRows: StoryObj<Args> = {
args: {
caption: 'Test table',
subcaption: 'Additional Subcaption',
isStatusEligible: true,
tableStyle: 'border',
rowStyle: 'lined',
},
render: (args) => {
const columns = [
// TODO-AH: export something to make this more convenient
columnHelper.accessor(DataTable.__StatusColumnId__, {
header: () => <DataTable.StatusHeaderCell />,
cell: (info) => <DataTable.StatusCell status={info.getValue()} />,
// TODO-AH: figure out cell size to make 28x32
size: 32,
}),
columnHelper.accessor('firstName', {
header: () => (
<DataTable.HeaderCell sortDirection="ascending">
First Name
</DataTable.HeaderCell>
),
cell: (info) => (
<DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
),
}),
columnHelper.accessor((row) => row.lastName, {
id: 'lastName',
header: () => <DataTable.HeaderCell>Last Name</DataTable.HeaderCell>,
cell: (info) => (
<DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
),
}),
columnHelper.accessor('age', {
header: () => (
<DataTable.HeaderCell alignment="trailing">Age</DataTable.HeaderCell>
),
cell: (info) => (
<DataTable.DataCell alignment="trailing">
{info.renderValue()}
</DataTable.DataCell>
),
}),
columnHelper.accessor('visits', {
header: () => (
<DataTable.HeaderCell alignment="trailing">
Visits
</DataTable.HeaderCell>
),
cell: (info) => (
<DataTable.DataCell alignment="trailing">
{info.renderValue()}
</DataTable.DataCell>
),
}),
columnHelper.accessor('progress', {
header: () => (
<DataTable.HeaderCell alignment="trailing">
Profile Progress
</DataTable.HeaderCell>
),
cell: (info) => (
<DataTable.DataCell alignment="trailing">
{info.renderValue()}
</DataTable.DataCell>
),
}),
];

// eslint-disable-next-line react-hooks/rules-of-hooks
const table = DataTableUtils.useReactTable({
data: defaultData,
columns,
getCoreRowModel: DataTableUtils.getCoreRowModel(),
});

return <DataTable {...args} table={table} />;
},
};

// TODO: Story for sticky column pinning (https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)

export const DefaultWithCustomTable: StoryObj<Args> = {
Expand Down
Loading

0 comments on commit 410279c

Please sign in to comment.