Add table component

[FelixTJDietrich]

Motivation

Leaderboard + Playing around with Angular trying to avoid directives -> Directives is the way to go :'(

Description

Add table component with~out~ directives ~by using css display styles~.

Screenshots

Checklist

General

• [x] PR title is clear and descriptive
• [x] PR description explains the purpose and changes
• [x] Code follows project coding standards
• [x] Self-review of the code has been done
• [x] Changes have been tested locally
• [x] Screenshots have been attached (if applicable)
• [ ] Documentation has been updated (if applicable)

Client (if applicable)

• [x] UI changes look good on all screen sizes and browsers
• [ ] No console errors or warnings
• [ ] User experience and accessibility have been tested
• [x] Added Storybook stories for new components
• [x] Components follow design system guidelines (if applicable)

[FelixTJDietrich]

Just as an experiment, I think we need to use directives and then the code will not be that cool. E.g. something like this: (not currently implemented)

      <table app-table>
        <caption app-table-caption>A list of your recent invoices.</caption>
        <thead app-table-header>
          <tr app-table-row>
            <th app-table-head class="w-[100px]">Invoice</th>
            <th app-table-head>Status</th>
            <th app-table-head>Method</th>
            <th app-table-head class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody app-table-body>
          @for (invoice of invoices; track invoice.invoice) {
            <tr app-table-row>
              <td app-table-cell class="font-medium">{{invoice.invoice}}</td>
              <td app-table-cell>{{invoice.paymentStatus}}</td>
              <td app-table-cell>{{invoice.paymentMethod}}</td>
              <td app-table-cell class="text-right">{{invoice.totalAmount}}</td>
            </tr>
          }
        </tbody>
        <tfoot app-table-footer>
          <tr app-table-row>
            <td app-table-cell colspan="3">Total</td>
            <td app-table-cell class="text-right">$2,500.00</td>
          </tr>
        </tfoot>
      </table>