X1056 unit visible on visium qc table

cypress/e2e/pages/visiumQC.cy.ts

@@ -333,14 +333,14 @@ describe('Visium QC Page', () => {
         cy.findByText('STAN-5100').should('be.visible');
       });
 
-      it('shows measurementType dropdown with fields when Library concentration option is selected', () => {
+      it('shows Library concentration table with unit name in lower case when Library concentration option is selected', () => {
         selectOption('measurementType', 'Library concentration');
-        cy.findByRole('table').get('th').eq(1).should('have.text', 'Library concentration (pl/ul)');
+        cy.findByRole('table').get('th').eq(1).should('have.text', 'LIBRARY CONCENTRATION (pl/\u00B5l)');
       });
 
-      it('shows measurementType dropdown with fields when cDNA concentration option is selected', () => {
+      it('shows cDNA concentration table with unit name in lower when cDNA concentration option is selected', () => {
         selectOption('measurementType', 'cDNA concentration');
-        cy.findByRole('table').get('th').eq(1).should('have.text', 'cDNA concentration (pl/ul)');
+        cy.findByRole('table').get('th').eq(1).should('have.text', 'CDNA CONCENTRATION (pl/\u00B5l)');
       });
 
       it('display text boxes to enter concentration value for all slots with samples', () => {

src/components/DataTable.tsx

@@ -3,6 +3,9 @@ import { Column, PluginHook, SortingRule, TableState, useSortBy, useTable } from
 import Table, { TableBody, TableCell, TableHead, TableHeader } from './Table';
 import { motion } from 'framer-motion';
 
+type ColumnWithAllCapitalProp<T extends object = {}> = Column<T> & {
+  allCapital?: boolean;
+};
 interface DataTableProps<T extends object> {
   columns: Column<T>[];
   data: T[];
@@ -87,7 +90,10 @@ const DataTableComponent = <T extends Object>(
         {headerGroups.map((headerGroup) => (
           <tr {...headerGroup.getHeaderGroupProps()}>
             {headerGroup.headers.map((column) => (
-              <TableHeader {...column.getHeaderProps(sortable ? column.getSortByToggleProps() : undefined)}>
+              <TableHeader
+                allCapital={(column as ColumnWithAllCapitalProp).allCapital}
+                {...column.getHeaderProps(sortable ? column.getSortByToggleProps() : undefined)}
+              >
                 {column.render('Header')}
                 {column.isSorted ? (
                   column.isSortedDesc ? (

src/components/Table.tsx

@@ -14,6 +14,7 @@ export type SortProps = {
 interface TableHeaderProps {
   sortProps?: SortProps;
   children?: ReactNode | ReactNode[];
+  allCapital?: boolean;
 }
 /**
  * @example
@@ -57,7 +58,7 @@ export const TableHead = ({ children, fixed = false }: TableHeadProps) => {
   return <thead className={`${fixed ? 'sticky top-0 z-20' : ''}`}>{children}</thead>;
 };
 
-export const TableHeader = ({ children, sortProps, ...rest }: TableHeaderProps) => {
+export const TableHeader = ({ children, sortProps, allCapital = true, ...rest }: TableHeaderProps) => {
   return (
     <th className="px-6 py-3 bg-gray-50 text-left select-none" {...rest}>
       <>
@@ -71,7 +72,9 @@ export const TableHeader = ({ children, sortProps, ...rest }: TableHeaderProps)
           >
             {
               <span
-                className={'bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 tracking-wider uppercase'}
+                className={`bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 tracking-wide ${
+                  allCapital ? 'uppercase' : ''
+                }`}
               >
                 {children}
               </span>

src/components/slotMeasurement/SlotMeasurements.tsx

@@ -17,8 +17,8 @@ type SlotMeasurementProps = {
 
 const setMeasurementNameTableTitle = (measurementName: string): string => {
   return measurementName === 'cDNA concentration' || measurementName === 'Library concentration'
-    ? `${measurementName} (pl/ul)`
-    : measurementName;
+    ? `${measurementName.toUpperCase()} (pl/\u00B5l)`
+    : measurementName.toUpperCase();
 };
 
 /**
@@ -51,6 +51,7 @@ const SlotMeasurements = ({
       {
         Header: setMeasurementNameTableTitle(measurementName),
         id: measurementName,
+        allCapital: false,
         Cell: ({ row }: { row: Row<SlotMeasurementRequest> }) => {
           return (
             <FormikInput