diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 728c8458fa..a74d3d2bec 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a bug report title: '' labels: Feature Request assignees: '' - --- ## Describe the bug @@ -17,6 +16,7 @@ assignees: '' ## Expected behavior ## Link to Minimal Reproducible Example + ## Environment diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index f8dcf06fb1..4a9623b95e 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Request a new feature or enhancement title: '' labels: Feature Request assignees: '' - --- ## Use case diff --git a/.gitignore b/.gitignore index fc83c9fed2..9ad8d4c877 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ __screenshots__ npm-debug.log **.orig +.idea diff --git a/README.md b/README.md index be321feada..3248f6aebb 100644 --- a/README.md +++ b/README.md @@ -459,6 +459,8 @@ function rowClass(row: Row, rowIdx: number) { } ``` +###### `headerRowClass?: Maybe>` + ###### `direction?: Maybe<'ltr' | 'rtl'>` This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects: diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 5c7ee028b9..e5350ae278 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -222,6 +222,7 @@ export interface DataGridProps extends Sha */ renderers?: Maybe, NoInfer>>; rowClass?: Maybe<(row: NoInfer, rowIdx: number) => Maybe>; + headerRowClass?: Maybe; /** @default 'ltr' */ direction?: Maybe; 'data-testid'?: Maybe; @@ -275,6 +276,7 @@ export function DataGrid(props: DataGridPr className, style, rowClass, + headerRowClass, direction: rawDirection, // ARIA role: rawRole, @@ -1118,6 +1120,7 @@ export function DataGrid(props: DataGridPr /> ))} extends SharedDataGr selectedCellIdx: number | undefined; shouldFocusGrid: boolean; direction: Direction; + headerRowClass: Maybe; } const headerRow = css` @@ -46,6 +47,7 @@ const headerRow = css` export const headerRowClassname = `rdg-header-row ${headerRow}`; function HeaderRow({ + headerRowClass, rowIdx, columns, onColumnResize, @@ -91,9 +93,13 @@ function HeaderRow({
{cells}
diff --git a/test/browser/headerRowClass.test.ts b/test/browser/headerRowClass.test.ts new file mode 100644 index 0000000000..0b16cbc3a4 --- /dev/null +++ b/test/browser/headerRowClass.test.ts @@ -0,0 +1,32 @@ +import { page } from '@vitest/browser/context'; + +import type { Column } from '../../src'; +import { headerRowClassname } from '../../src/HeaderRow'; +import { setup } from './utils'; + +interface Row { + id: number; +} + +const columns: readonly Column[] = [{ key: 'id', name: 'ID' }]; +const rows: readonly Row[] = [{ id: 0 }]; + +test('headerRowClass is undefined', () => { + setup({ + columns, + rows, + rowClass: undefined + }); + const header = page.getByRole('row').first(); + expect(header).toHaveClass(headerRowClassname, { exact: true }); +}); + +test('headerRowClass is a string', () => { + setup({ + columns, + rows, + headerRowClass: 'my-header-row' + }); + const header = page.getByRole('row').first(); + expect(header).toHaveClass(`${headerRowClassname} my-header-row`, { exact: true }); +});