Merge pull request #372 from panichevoleg/bugfix/648843-table-wrong-header

WCAG: PreciseUI table has wrong header

Author: FlorianRappl

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Precise UI Changelog
 
+## 2.1.10
+
+- Fix WCAG error: Empty table header
+
 ## 2.1.9
 
 - Fixed `arrowToggle` on `AccordionTable`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",

src/components/Table/TableBasic.part.tsx

@@ -42,6 +42,7 @@ const StyledTable = styled.table<StyledTableProps>(
     border: ${borderless ? 'none' : theme.tableBorder};
 
     > thead > tr > th,
+    > thead > tr > td,
     > tbody > tr > td {
       padding: ${condensed ? `${distance.small} ${distance.large}` : theme.tableHeadPadding};
 
@@ -245,8 +246,11 @@ export class TableBasic<T> extends React.Component<TableProps<T> & RefProps, Tab
               const width = typeof column === 'string' ? undefined : column.width;
               const sortable = this.isSortable(key, columns);
               const direction = sortable && sortBy && (sortBy.columnKey !== key ? undefined : sortBy.order);
+              const headTag = `${name}`.trim() ? 'th' : 'td';
+
               return (
                 <StyledTableHeader
+                  as={headTag}
                   sortable={sortable}
                   width={width}
                   key={key}