(null)
+
if (!table) return null
const headerGroups = table.getHeaderGroups()
@@ -19,6 +23,7 @@ export function TableHeader() {
const isSortable = header.column.getCanSort()
const sortDir = header.column.getIsSorted()
const isSelectionCol = header.column.id === SELECTION_COLUMN_ID
+ const isFilterPopoverOpen = filterPopoverOpen === header.column.id
return (
) : header.isPlaceholder ? null : (
- <>
- {flexRender(header.column.columnDef.header, header.getContext())}
- {sortDir && (
-
- {sortDir === 'asc' ? ' \u2191' : ' \u2193'}
-
- )}
-
+ setFilterPopoverOpen(header.column.id)}
+ >
+
+ {flexRender(header.column.columnDef.header, header.getContext())}
+ {sortDir && (
+
+ {sortDir === 'asc' ? ' \u2191' : ' \u2193'}
+
+ )}
+ {header.column.getCanFilter() && (
+
+ setFilterPopoverOpen(opened ? header.column.id : null)
+ }
+ opened={isFilterPopoverOpen}
+ />
+ )}
+
+
)}
{header.column.getCanResize() && (
{
+ test.beforeEach(async ({ page }) => {
+ // Navigate to the WithTextFiltering story
+ await page.goto(
+ '/?path=/story/components-griddy--with-text-filtering'
+ )
+ // Wait for the Griddy table to load
+ await page.waitForSelector('[role="table"]', { timeout: 5000 })
+ })
+
+ test('should show context menu on right-click on column header', async ({ page }) => {
+ // Right-click on "First Name" header
+ const firstNameHeader = page.locator('[role="columnheader"]').first()
+ await firstNameHeader.click({ button: 'right' })
+
+ // Check if context menu items appear
+ await expect(page.locator('text=Sort')).toBeVisible({ timeout: 2000 })
+ await expect(page.locator('text=Open Filters')).toBeVisible()
+ })
+
+ test('should show "Reset Sorting" option when column is sorted', async ({ page }) => {
+ const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+ // Click to sort the column
+ await firstNameHeader.click()
+
+ // Wait a moment for state update
+ await page.waitForTimeout(100)
+
+ // Right-click to open context menu
+ await firstNameHeader.click({ button: 'right' })
+
+ // Check if "Reset Sorting" appears
+ await expect(page.locator('text=Reset Sorting')).toBeVisible({ timeout: 2000 })
+ })
+
+ test('should show "Reset Filter" option when filter is active', async ({ page }) => {
+ const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+ // Right-click to open context menu
+ await firstNameHeader.click({ button: 'right' })
+
+ // Click "Open Filters"
+ await page.locator('text=Open Filters').click()
+
+ // Wait for filter popover to appear
+ await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+ // Set a filter value
+ const textInput = page.locator('input[placeholder="Enter value..."]')
+ await textInput.fill('Alice')
+
+ // Click Apply button
+ await page.locator('button:has-text("Apply")').click()
+
+ // Wait for popover to close
+ await page.waitForTimeout(200)
+
+ // Right-click again to open context menu
+ await firstNameHeader.click({ button: 'right' })
+
+ // Check if "Reset Filter" appears
+ await expect(page.locator('text=Reset Filter')).toBeVisible({ timeout: 2000 })
+ })
+
+ test('should open filter panel when "Open Filters" is clicked', async ({ page }) => {
+ const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+ // Right-click to open context menu
+ await firstNameHeader.click({ button: 'right' })
+
+ // Click "Open Filters"
+ await page.locator('text=Open Filters').click()
+
+ // Check if filter popover appears with correct title
+ await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+ // Check if operator dropdown exists
+ await expect(page.locator('text=Operator').or(page.locator('[role="combobox"]'))).toBeVisible()
+
+ // Check if input field exists
+ await expect(page.locator('input[placeholder="Enter value..."]')).toBeVisible()
+
+ // Check if Apply and Clear buttons exist
+ await expect(page.locator('button:has-text("Apply")')).toBeVisible()
+ await expect(page.locator('button:has-text("Clear")')).toBeVisible()
+ })
+
+ test('should filter data when filter is applied', async ({ page }) => {
+ const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+ // Right-click to open context menu
+ await firstNameHeader.click({ button: 'right' })
+
+ // Click "Open Filters"
+ await page.locator('text=Open Filters').click()
+
+ // Wait for filter popover
+ await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+ // Set filter value to "Alice"
+ const textInput = page.locator('input[placeholder="Enter value..."]')
+ await textInput.fill('Alice')
+
+ // Wait for debounce (300ms)
+ await page.waitForTimeout(350)
+
+ // Click Apply button
+ await page.locator('button:has-text("Apply")').click()
+
+ // Wait for filter to be applied
+ await page.waitForTimeout(200)
+
+ // Check that filter icon is now blue (active)
+ const filterButton = page.locator('[aria-label="Filter status indicator"]').first()
+ const color = await filterButton.evaluate((el: any) => {
+ return window.getComputedStyle(el).color
+ })
+
+ // Blue color should be present (filter is active)
+ expect(color).toContain('rgb')
+ })
+
+ test('should clear filter when "Reset Filter" is clicked', async ({ page }) => {
+ const firstNameHeader = page.locator('[role="columnheader"]').first()
+
+ // Open filter and apply one
+ await firstNameHeader.click({ button: 'right' })
+ await page.locator('text=Open Filters').click()
+ await expect(page.locator('text=Filter: firstName')).toBeVisible({ timeout: 2000 })
+
+ const textInput = page.locator('input[placeholder="Enter value..."]')
+ await textInput.fill('Alice')
+ await page.waitForTimeout(350)
+ await page.locator('button:has-text("Apply")').click()
+ await page.waitForTimeout(200)
+
+ // Now clear the filter via context menu
+ await firstNameHeader.click({ button: 'right' })
+ await page.locator('text=Reset Filter').click()
+
+ // Wait for state update
+ await page.waitForTimeout(200)
+
+ // Right-click again to verify "Reset Filter" is gone
+ await firstNameHeader.click({ button: 'right' })
+
+ // "Reset Filter" should not be visible
+ const resetFilterItem = page.locator('text=Reset Filter').first()
+ await expect(resetFilterItem).not.toBeVisible({ timeout: 2000 })
+ })
+
+ test('should have visible filter status icon', async ({ page }) => {
+ // Check that filter icons are visible in headers
+ const filterButton = page.locator('[aria-label="Filter status indicator"]').first()
+ await expect(filterButton).toBeVisible()
+
+ // Check that the icon has opacity (should be visible)
+ const opacity = await filterButton.evaluate((el: any) => {
+ return window.getComputedStyle(el).opacity
+ })
+
+ expect(parseFloat(opacity)).toBeGreaterThan(0.5)
+ })
+})