Data Table Toolbar not displayed if Table has a Title #11473
Assignees
Labels
Comments
2 tasks
kennylam
pushed a commit
to kennylam/carbon-for-ibm-dotcom
that referenced
this issue
Mar 12, 2024
…stem#11491) ### Related Ticket(s) Closes carbon-design-system#11473 ### Description For data table, `cds-table-toolbar` and `cds-table-header-title` doesn't work together in firefox browser. Toolbar doesn't show. ### Changelog **Changed** - Updated the toolbar slot position. - Updated the style for toolbar and the container. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
kennylam
pushed a commit
to kennylam/carbon-for-ibm-dotcom
that referenced
this issue
Jun 11, 2024
…stem#11491) ### Related Ticket(s) Closes carbon-design-system#11473 ### Description For data table, `cds-table-toolbar` and `cds-table-header-title` doesn't work together in firefox browser. Toolbar doesn't show. ### Changelog **Changed** - Updated the toolbar slot position. - Updated the style for toolbar and the container. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
In Firefox, if you have a datatable with a toolbar, the toolbar isn't displayed if you also use the cds-table-header-title option. So it's not possible to have a title on a table that has a toolbar.
<cds-table-header-title slot="title">DataTable</cds-table-header-title>Try this Code Sandbox: https://codesandbox.io/p/devbox/angry-fermi-cdh3h5
The middle table is supposed to show both a title and a toolbar (with the search field). In Edge that works fine, however in Firefox it only displays the title, not the toolbar. If you look at the 3rd table on that page, the only difference from the middle table is that I removed the title but left in the toolbar, and in Firefox the toolbar does display. So clearly, in Firefox, you can't have both a title and a toolbar.
Firefox:
Edge:
Component(s) impacted
DataTable
Browser
Firefox
Carbon for IBM.com version
v2/latest
Severity
Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.
Application/website
Various tools for UK Labs
Package
@carbon/web-components
CodeSandbox example
https://codesandbox.io/p/devbox/angry-fermi-cdh3h5
Steps to reproduce the issue (if applicable)
No response
Release date (if applicable)
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: