diff --git a/.changeset/slimy-carpets-tease.md b/.changeset/slimy-carpets-tease.md
new file mode 100644
index 0000000000..33d943c868
--- /dev/null
+++ b/.changeset/slimy-carpets-tease.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Renamed the Table's `initialSortedRow` prop to `initialSortedColumn` to better express its purpose. The `initialSortedRow` is deprecated and will be removed in the next major release.
diff --git a/packages/circuit-ui/components/Table/Table.spec.tsx b/packages/circuit-ui/components/Table/Table.spec.tsx
index 2f8c3141bc..0b827e7b77 100644
--- a/packages/circuit-ui/components/Table/Table.spec.tsx
+++ b/packages/circuit-ui/components/Table/Table.spec.tsx
@@ -113,7 +113,30 @@ describe('Table', () => {
});
});
- it('should sort a column in ascending order when initial sort direction and initial sorted row is provided', () => {
+ it('should sort a column in ascending order when initial sort direction and initial sorted column is provided', () => {
+ render(
+
,
+ );
+
+ const cellEls = screen.getAllByRole('cell');
+
+ const sortedRow = ['a', 'c', 'b'];
+
+ rows.forEach((_row, index) => {
+ const cellIndex = rowLength * index;
+ expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]);
+ });
+ });
+
+ it('should sort a column in ascending order when initial sort direction and initial sorted row is provided and console.warn about it', () => {
+ const warnMock = vi.spyOn(console, 'warn');
+
render(
{
const cellIndex = rowLength * index;
expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]);
});
+ expect(warnMock).toHaveBeenCalled();
});
it('should sort a column in descending order', async () => {
@@ -151,13 +175,13 @@ describe('Table', () => {
});
});
- it('should sort a column in descending order when initial sort direction and initial sorted row is provided', () => {
+ it('should sort a column in descending order when initial sort direction and initial sorted column is provided', () => {
render(
,
);
diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx
index 2b30334045..8b11a61725 100644
--- a/packages/circuit-ui/components/Table/Table.tsx
+++ b/packages/circuit-ui/components/Table/Table.tsx
@@ -20,6 +20,7 @@ import { Component, createRef, HTMLAttributes, UIEvent } from 'react';
import { isNil } from '../../util/type-check.js';
import { throttle } from '../../util/helpers.js';
import { clsx } from '../../styles/clsx.js';
+import { deprecate } from '../../util/logger.js';
import TableHead from './components/TableHead/index.js';
import TableBody from './components/TableBody/index.js';
@@ -68,9 +69,15 @@ export interface TableProps extends HTMLAttributes {
*/
initialSortDirection?: 'ascending' | 'descending';
/**
- * Specifies the row index which `initialSortDirection` will be applied to
+ * @deprecated
+ *
+ * Use the `initialSortedColumn` prop instead.
*/
initialSortedRow?: number;
+ /**
+ * Specifies the column index which `initialSortDirection` will be applied to
+ */
+ initialSortedColumn?: number;
/**
* Click handler for the row
* The signature is (index)
@@ -83,7 +90,7 @@ export interface TableProps extends HTMLAttributes {
}
type TableState = {
- sortedRow?: number;
+ sortedColumn?: number;
rows?: Row[];
sortHover?: number;
sortDirection?: Direction;
@@ -97,12 +104,19 @@ type TableState = {
class Table extends Component {
constructor(props: TableProps) {
super(props);
+ if (process.env.NODE_ENV !== 'production' && this.props.initialSortedRow) {
+ deprecate(
+ 'Table',
+ 'The `initialSortedRow` prop has been deprecated. Use the `initialSortedColumn` prop instead.',
+ );
+ }
this.state = {
- sortedRow: this.props.initialSortedRow,
+ sortedColumn:
+ this.props.initialSortedColumn || this.props.initialSortedRow,
rows: this.getInitialRows(
this.props.rows,
this.props.initialSortDirection,
- this.props.initialSortedRow,
+ this.props.initialSortedColumn || this.props.initialSortedRow,
),
sortHover: undefined,
sortDirection: this.props.initialSortDirection,
@@ -122,10 +136,10 @@ class Table extends Component {
componentDidUpdate(prevProps: TableProps): void {
if (this.props.rows !== prevProps.rows) {
// Preserve existing sorting
- if (this.state.sortedRow && this.state.sortDirection) {
+ if (this.state.sortedColumn && this.state.sortDirection) {
const sortedRows = this.getSortedRows(
this.state.sortDirection,
- this.state.sortedRow,
+ this.state.sortedColumn,
);
this.setState({ rows: sortedRows });
return;
@@ -177,8 +191,8 @@ class Table extends Component {
onSortLeave = (): void => this.setState({ sortHover: undefined });
onSortBy = (i: number): void => {
- const { sortedRow, sortDirection } = this.state;
- const isActive = i === sortedRow;
+ const { sortedColumn, sortDirection } = this.state;
+ const isActive = i === sortedColumn;
const nextDirection = getSortDirection(isActive, sortDirection);
const sortedRows = this.getSortedRows(nextDirection, i);
@@ -188,13 +202,11 @@ class Table extends Component {
getInitialRows = (
rows: Row[],
initialSortDirection?: Direction | undefined,
- initialSortedRow?: number | undefined,
- ): Row[] => {
- if (initialSortedRow && initialSortDirection) {
- return this.getSortedRows(initialSortDirection, initialSortedRow);
- }
- return rows;
- };
+ initialSortedColumn?: number | undefined,
+ ): Row[] =>
+ initialSortedColumn && initialSortDirection
+ ? this.getSortedRows(initialSortDirection, initialSortedColumn)
+ : rows;
getSortedRows = (sortDirection: Direction, sortedRow: number): Row[] => {
const { rows, onSortBy } = this.props;
@@ -205,7 +217,7 @@ class Table extends Component {
updateSort = (i: number, nextDirection: Direction, sortedRows: Row[]): void =>
this.setState({
- sortedRow: i,
+ sortedColumn: i,
sortDirection: nextDirection,
rows: sortedRows,
});
@@ -231,7 +243,7 @@ class Table extends Component {
const {
sortDirection,
sortHover,
- sortedRow,
+ sortedColumn,
scrollTop,
tableBodyHeight,
rows,
@@ -267,7 +279,7 @@ class Table extends Component {
condensed={condensed}
scrollable={scrollable}
sortDirection={sortDirection}
- sortedRow={sortedRow}
+ sortedColumn={sortedColumn}
onSortBy={this.onSortBy}
onSortEnter={this.onSortEnter}
onSortLeave={this.onSortLeave}
diff --git a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx
index d322921ea4..9752bdca81 100644
--- a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx
+++ b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx
@@ -63,9 +63,9 @@ type TableHeadProps = ScrollableOptions & {
*/
sortDirection?: Direction;
/**
- * The current sorted row index
+ * The current sorted column index
*/
- sortedRow?: number;
+ sortedColumn?: number;
/**
* sortEnter handler
*/
@@ -87,7 +87,7 @@ export function TableHead({
top,
onSortBy,
sortDirection,
- sortedRow,
+ sortedColumn,
onSortEnter,
onSortLeave,
}: TableHeadProps) {
@@ -105,11 +105,11 @@ export function TableHead({
const cellProps = mapCellProps(header);
const { sortable, sortLabel } = cellProps;
const sortParams = getSortParams({
- rowIndex: i,
+ columnIndex: i,
sortable,
sortDirection,
sortLabel,
- sortedRow,
+ sortedColumn,
});
return (
diff --git a/packages/circuit-ui/components/Table/utils.spec.ts b/packages/circuit-ui/components/Table/utils.spec.ts
index 4db65db317..0b3773342a 100644
--- a/packages/circuit-ui/components/Table/utils.spec.ts
+++ b/packages/circuit-ui/components/Table/utils.spec.ts
@@ -182,7 +182,7 @@ describe('Table utils', () => {
describe('getSortParams', () => {
it('should return sort params with a string sortLabel', () => {
const actual = utils.getSortParams({
- rowIndex: 1,
+ columnIndex: 1,
sortable: true,
sortLabel: 'Sort',
});
@@ -201,7 +201,7 @@ describe('Table utils', () => {
return `Sort in ${order} order`;
};
const actual = utils.getSortParams({
- rowIndex: 1,
+ columnIndex: 1,
sortable: true,
sortLabel,
});
@@ -220,8 +220,8 @@ describe('Table utils', () => {
return `Sort in ${order} order`;
};
const actual = utils.getSortParams({
- rowIndex: 1,
- sortedRow: 1,
+ columnIndex: 1,
+ sortedColumn: 1,
sortable: true,
sortDirection: 'descending',
sortLabel,
@@ -237,14 +237,14 @@ describe('Table utils', () => {
});
it('should return sortable:false if sortable is falsy', () => {
- const actual = utils.getSortParams({ rowIndex: 0 });
+ const actual = utils.getSortParams({ columnIndex: 0 });
const expected = { sortable: false };
expect(actual).toEqual(expected);
});
it('should return sortable:false if sortLabel is falsy', () => {
- const actual = utils.getSortParams({ rowIndex: 0, sortable: true });
+ const actual = utils.getSortParams({ columnIndex: 0, sortable: true });
const expected = { sortable: false };
expect(actual).toEqual(expected);
diff --git a/packages/circuit-ui/components/Table/utils.ts b/packages/circuit-ui/components/Table/utils.ts
index bfcbadf687..64b9e681a5 100644
--- a/packages/circuit-ui/components/Table/utils.ts
+++ b/packages/circuit-ui/components/Table/utils.ts
@@ -118,22 +118,22 @@ export const descendingSort =
};
export const getSortParams = ({
- rowIndex,
+ columnIndex,
sortable,
sortDirection,
sortLabel,
- sortedRow,
+ sortedColumn,
}: {
- rowIndex: number;
+ columnIndex: number;
sortable?: boolean;
sortDirection?: Direction;
sortLabel?: string | (({ direction }: { direction?: Direction }) => string);
- sortedRow?: number;
+ sortedColumn?: number;
}): SortParams => {
if (!sortable || !sortLabel) {
return { sortable: false };
}
- const isSorted = sortedRow === rowIndex;
+ const isSorted = sortedColumn === columnIndex;
return {
sortable: true,
sortLabel: isFunction(sortLabel)