openproject/app/assets/stylesheets/content/_work_packages_table.md

# Work packages table

## with work packages

```
<div class="work-packages-table--container">
  <div class="work-packages-table--results-container">
    <table class="workpackages-table">
      <thead>
        <tr>
          <th>
            <div class="work-packages-table--header-outer">
              <input type="checkbox">
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                #
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th class="active-column">
            <div class="sort-header-outer">
              <span class="sort-header">
                Subject
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Type
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Status
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Priority
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Assignee
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
      	<tr>
        	<td class="checkbox">
    			  <p><input type="checkbox"></p>
    		  </td>
    		  <td class="id">
      			<p>1234</p>
      		</td>
      		<td>
      			<p>Lorem ipsum</p>
      		</td>
      		<td>
      			<p>User Story</p>
      			<div class="active-column"></div>
      		</td>
      		<td>
      			<p>In Progress</p>
      		</td>
      		<td>
      			<p>Normal</p>
      		</td>
      		<td>
      			<p>John Doe</p>
      		</td>
    	  </tr>
        <tr>
          <td class="checkbox">
            <p><input type="checkbox"></p>
          </td>
          <td class="id">
            <p>1234</p>
          </td>
          <td>
            <p>Lorem ipsum</p>
          </td>
          <td>
            <p>User Story</p>
            <div class="active-column"></div>
          </td>
          <td>
            <p>In Progress</p>
          </td>
          <td>
            <p>Normal</p>
          </td>
          <td>
            <p>John Doe</p>
          </td>
        </tr>
        <tr>
          <td class="checkbox">
            <p><input type="checkbox"></p>
          </td>
          <td class="id">
            <p>1234</p>
          </td>
          <td>
            <p>Lorem ipsum</p>
          </td>
          <td>
            <p>User Story</p>
            <div class="active-column"></div>
          </td>
          <td>
            <p>In Progress</p>
          </td>
          <td>
            <p>Normal</p>
          </td>
          <td>
            <p>John Doe</p>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="work-packages-table--header-background"></div>
  </div>
</div>
```

## with no work packages

```
<div class="work-packages-table--container" style="height:150px">
  <div class="work-packages-table--no-results-container">
    <h2 class="work-packages-table--no-results-title">
      <i class="icon-info"></i>
      No work packages to display
    </h2>
    <div class="work-packages-table--no-results-description">
      <p>Either none have been created or all work packages are filtered out.</p>
    </div>
  </div>
</div>
```