title: Weekly display of headers with react-table
body: <p>I am trying to implement a table to display shifts of employees with react-table.
  I would like to find a way to display every day of the week (Monday to Sunday) for each column in the table, and having a feature where I can navigate through the next/past weeks.
  I am trying every way but I am struggling to find a proper solution for this.</p>
  <p>This is my table:</p>
  <pre><code> &lt;table
          {...getTableProps()}
          className=&quot;min-w-full divide-y divide-gray-200&quot;
        &gt;
          &lt;thead className=&quot;bg-gray-50&quot;&gt;
            {headerGroups.map((headerGroup) =&gt; (
              &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                {headerGroup.headers.map((column) =&gt; (
                  &lt;th
                    {...column.getHeaderProps()}
                    scope=&quot;col&quot;
                    className=&quot;px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider&quot;
                  &gt;
                    {column.render(&quot;Header&quot;)}
                  &lt;/th&gt;
                ))}
              &lt;/tr&gt;
            ))}
          &lt;/thead&gt;
          &lt;tbody {...getTableBodyProps()}&gt;
            {page.map((row) =&gt; {
              prepareRow(row);
              return (
                &lt;tr {...row.getRowProps()} className=&quot;bg-white rt-tr-group&quot;&gt;
                  {row.cells.map((cell) =&gt; {
                    return (
                      &lt;td
                        {...cell.getCellProps}
                        className=&quot;px-6 py-4 whitespace-nowrap text-sm text-gray-500&quot;
                      &gt;
                        {cell.render(&quot;Cell&quot;)}
                      &lt;/td&gt;
                    );
                  })}
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  <p>And those are my columns:</p>
  <pre><code>import moment from &quot;moment&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faClock } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  
  const today = new Date();
  const tomorrow = new Date(today);
  
  const renderStateOfShift = (shift: any) =&gt; {
    if (shift.arrived) {
      return (
        &lt;span className=&quot;px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800&quot;&gt;
          In
        &lt;/span&gt;
      );
    } else {
      return (
        &lt;span className=&quot;px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800&quot;&gt;
          Late
        &lt;/span&gt;
      );
    }
  };
  
  const returnShifts = (
    data: { cell: { row: { original: { shifts: any[] } } } },
    formattedDay: string
  ) =&gt; {
    return (
      &lt;div className=&quot;flex flex-col justify-center&quot;&gt;
        {data.cell.row.original.shifts.map((shift: any) =&gt;
          formattedDay === shift.start.split(&quot;T&quot;)[0] ? (
            &lt;div&gt;
              &lt;div className=&quot;bg-white px-4 py-4 flex-1 my-2 rounded-lg shadow flex flex-col justify-center&quot;&gt;
                &lt;td&gt;{shift.job_id}&lt;/td&gt;
                &lt;div className=&quot;flex flex-row&quot;&gt;
                  &lt;td&gt;
                    &lt;FontAwesomeIcon icon={faClock} size=&quot;sm&quot; /&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;{shift.start.split(&quot;T&quot;)[1].substring(0, 5)}&lt;/td&gt;
                  &lt;td&gt;-&lt;/td&gt;
                  &lt;td&gt;{shift.end.split(&quot;T&quot;)[1].substring(0, 5)}&lt;/td&gt;
                  &lt;td&gt;{renderStateOfShift(shift)}&lt;/td&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          ) : null
        )}
      &lt;/div&gt;
    );
  };
  
  export const COLUMNS = [
    {
      Header: &quot;EMPLOYEE&quot;,
      accessor: &quot;worker_id&quot;,
      Cell: (data) =&gt; {
        const employeeName = data.cell.row.original.worker_name;
        const employeeRole = data.cell.row.original.worker_role;
        return (
          &lt;div className=&quot;flex flex-row&quot;&gt;
            &lt;img
              className=&quot;inline-block  h-10 w-10 rounded-full&quot;
              src=&quot;https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixqx=azIRqR0jgc&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80&quot;
              alt=&quot;&quot;
            /&gt;
  
            &lt;div className=&quot;flex flex-col justify-center&quot;&gt;
              &lt;td&gt;{employeeName}&lt;/td&gt;
              &lt;td&gt;{employeeRole}&lt;/td&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      },
    },
    {
      Header: moment(today).format(&quot;ll&quot;),
      accessor: &quot;monday&quot;,
      //@ts-ignore
      Cell: (data) =&gt; {
        const formattedDay = today.toISOString().split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format(&quot;ll&quot;),
      accessor: &quot;tuesday&quot;,
      Cell: (data: any) =&gt; {
        const formattedDay = moment(today)
          .add(1, &quot;day&quot;)
          .toISOString()
          .split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format(&quot;ll&quot;),
      accessor: &quot;thursday&quot;,
      Cell: (data: any) =&gt; {
        const formattedDay = moment(today)
          .add(2, &quot;day&quot;)
          .toISOString()
          .split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format(&quot;ll&quot;),
      accessor: &quot;wednesday&quot;,
      Cell: (data: any) =&gt; {
        const formattedDay = moment(today)
          .add(3, &quot;day&quot;)
          .toISOString()
          .split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format(&quot;ll&quot;),
      accessor: &quot;friday&quot;,
      Cell: (data: any) =&gt; {
        const formattedDay = moment(today)
          .add(4, &quot;day&quot;)
          .toISOString()
          .split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format(&quot;ll&quot;),
      accessor: &quot;saturday&quot;,
      Cell: (data: any) =&gt; {
        const formattedDay = moment(today)
          .add(5, &quot;day&quot;)
          .toISOString()
          .split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format(&quot;ll&quot;),
      accessor: &quot;sunday&quot;,
      Cell: (data: any) =&gt; {
        const formattedDay = moment(today)
          .add(6, &quot;day&quot;)
          .toISOString()
          .split(&quot;T&quot;)[0];
        return returnShifts(data, formattedDay);
      },
    },
    {
      Header: &quot;DETAILS&quot;,
      accessor: &quot;delivery&quot;,
    },
  ];
  </code></pre>
  <p>This is how the table looks like so far:
  <a href="https://i.stack.imgur.com/gMqZD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMqZD.png" alt="enter image description here" /></a></p>
  <p>Can someone help me out?</p>