T
TanStack•11mo ago
complex-teal

Styling thead and tbody depending on groups

I am trying to style a table according to the groups the data is divided into. I need for example, the top row which shows group names to be white and then the actual column names to be a different colour(blue-grey). But also only to show some group names. This is what I have come up with and it seems to work but seems a bit hacky. Is there an easier way using TanStack Table? 
       const getGroupNameFromId = (headerId: string, headerGroupId: string) => {
        if (headerGroupId === "0") {
          const parts = headerId.split("_"); // Split the id by underscores

          if (parts.length === 1) {
            return "Ungrouped"; // Return 'Ungrouped' if there is only one part
          } else {
            return parts[1];
          }
        } else {
          return headerId;
        }        
      };


       <thead>
          <tr
            v-for="headerGroup in table.getHeaderGroups()"
            :key="headerGroup.id"
          >            
            <th
              class="py-2 px-2 text-left tracking-wider border-l border-white"
              v-for="header in headerGroup.headers"
              :key="header.id"
              :colSpan="header.colSpan"
              :class="[
                header.id,
                headerGroup.id === '0'
                  ? 'bg-white text-black font-bold text-center bg-very-light-blue'
                  : 'bg-blue-grey text-white  font-normal',

              ]"
            >
              <template
                v-if="
                  getGroupNameFromId(header.id, headerGroup.id) ===
                    'Ungrouped' ||
                  getGroupNameFromId(header.id, headerGroup.id) === 'Names'
                "
              >
                <span>&nbsp;</span>
              </template>
       
              <template v-else>
<!-- show other header group names or column names -->
                ...
              </template>

             
            </th>
          </tr></thead>
       const getGroupNameFromId = (headerId: string, headerGroupId: string) => {
        if (headerGroupId === "0") {
          const parts = headerId.split("_"); // Split the id by underscores

          if (parts.length === 1) {
            return "Ungrouped"; // Return 'Ungrouped' if there is only one part
          } else {
            return parts[1];
          }
        } else {
          return headerId;
        }        
      };


       <thead>
          <tr
            v-for="headerGroup in table.getHeaderGroups()"
            :key="headerGroup.id"
          >            
            <th
              class="py-2 px-2 text-left tracking-wider border-l border-white"
              v-for="header in headerGroup.headers"
              :key="header.id"
              :colSpan="header.colSpan"
              :class="[
                header.id,
                headerGroup.id === '0'
                  ? 'bg-white text-black font-bold text-center bg-very-light-blue'
                  : 'bg-blue-grey text-white  font-normal',

              ]"
            >
              <template
                v-if="
                  getGroupNameFromId(header.id, headerGroup.id) ===
                    'Ungrouped' ||
                  getGroupNameFromId(header.id, headerGroup.id) === 'Names'
                "
              >
                <span>&nbsp;</span>
              </template>
       
              <template v-else>
<!-- show other header group names or column names -->
                ...
              </template>

             
            </th>
          </tr></thead>
1 Reply
dependent-tan
dependent-tan•11mo ago
HI , I can help you. I hope hearing from you soon.

Did you find this page helpful?