Table | Civica design system

When to use

Use table components when you need to display structured data, such as lists of items with multiple attributes, in a clear and organized manner.
Implement tables when users need the ability to filter and sort data columns to find specific information quickly.
Tables are useful for applications where users need to edit or enter data directly within rows and columns, such as spreadsheets and data entry forms.
Use table components to generate tabular reports and summaries of data, allowing users to view aggregated information in an organized layout.
Tables facilitate the export of data to various formats like CSV or Excel, making it accessible for users to save and manipulate data offline.
Tables help maintain consistency in the presentation of data, ensuring that each row and column aligns with corresponding data elements.

Guidelines

Define the purpose of the table and ensure that the content is relevant to that purpose. Avoid displaying extraneous or unnecessary information.
Ensure that the table component is responsive and adapts to various screen sizes and orientations, including mobile devices.
Include clear and concise column headers that describe the content of each column. Use semantic HTML elements (e.g., th) for headers.
Allow users to sort columns in ascending and descending order by clicking on column headers. Provide visual indicators (e.g., arrows) to show the current sorting direction.
Implement pagination or infinite scrolling for large datasets to improve performance and prevent information overload on a single page.
Provide options for users to filter and search within the table to locate specific data. Offer clear search and filter controls.
If applicable, allow users to select rows for actions such as editing, deleting, or further analysis. Provide clear visual cues for selected rows.
Use alternating row background colors or shading to improve readability and help users differentiate between rows.
Create accessible data tables by using semantic HTML elements, providing appropriate ARIA attributes, and ensuring keyboard navigation support.
Allow columns to resize based on content, but also provide the option for users to adjust column widths manually.
Consider implementing the ability to freeze headers and/or columns, especially for wide tables, to ensure headers remain visible as users scroll.
Offer the capability to export the table data to various formats (e.g., CSV, PDF) and provide a print-friendly version.
Allow users to hide or show columns based on their preferences, especially in tables with many columns.
If users need to edit data within the table, make cells editable with clear indicators (e.g., inline editing or modal dialogs).

Basic

Table component is used to organize and display data efficiently. It renders a <table> element by default.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<table class="table">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Striped

table-stripedis used to differentiate rows from each other.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<table class="table table-striped">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Paginator

Pagination is added at bottom of the table to specify the number of rows per page & number of data items.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

Showing 1 to 5 of 100 enteries
1
2
3

<table class="table">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Sort

A column can be made sortable by adding sort-data class.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<table class="table">
  <thead>
    <tr>
      <th>Code <a href="#" class="sort-data-link"><i class="ds ds-arrow-down-up"></i></a></th>
      <th>Name <a href="#" class="sort-data-link"><i class="ds ds-arrow-down-up"></i></a></th>
      <th>Category <a href="#" class="sort-data-link"><i class="ds ds-arrow-down-up"></i></a></th>
      <th>Quantity <a href="#" class="sort-data-link"><i class="ds ds-arrow-down-up"></i></a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Filter

A column can have filter option by using filter-btn class.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<table class="table">
  <thead>
    <tr>
      <th>Code <button type="button" class="filter-btn"><i class="ds ds-filter"></i></button></th>
      <th>Name <button type="button" class="filter-btn"><i class="ds ds-filter"></i></button></th>
      <th>Category <button type="button" class="filter-btn"><i class="ds ds-filter"></i></button></th>
      <th>Quantity <button type="button" class="filter-btn"><i class="ds ds-filter"></i></button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Checkbox Select

Multiple selection can also be handled using checkboxes by providing type=checkbox.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<table class="table">
  <thead>
    <tr>
      <th>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        </div>
      </th>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1">
        </div>
      </td>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
        </div>
      </td>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
        </div>
      </td>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
        </div>
      </td>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
        </div>
      </td>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Radio Select

Single selection can also be handled using radio buttons by providing type=radio.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1">
        </div>
      </td>
      <td>f230fh0g3</td>
      <td>Bamboo Watch</td>
      <td>Accessories</td>
      <td>24</td>
    </tr>
    <tr>
      <td>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2">
        </div>
      </td>
      <td>nvklal433</td>
      <td>Black Watch</td>
      <td>Accessories</td>
      <td>61</td>
    </tr>
    <tr>
      <td>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3">
        </div>
      </td>
      <td>zz21cz3c1</td>
      <td>Blue Band</td>
      <td>Fitness</td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4">
        </div>
      </td>
      <td>244wgerg2</td>
      <td>Blue T-Shirt</td>
      <td>Clothing</td>
      <td>25</td>
    </tr>
    <tr>
      <td>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5">
        </div>
      </td>
      <td>h456wer53</td>
      <td>Bracelet</td>
      <td>Accessories</td>
      <td>73</td>
    </tr>
  </tbody>
</table>

Responsive

The table-responsive class can be used to make it responsive.

Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>f230fh0g3</td>
        <td>Bamboo Watch</td>
        <td>Accessories</td>
        <td>24</td>
      </tr>
      <tr>
        <td>nvklal433</td>
        <td>Black Watch</td>
        <td>Accessories</td>
        <td>61</td>
      </tr>
      <tr>
        <td>zz21cz3c1</td>
        <td>Blue Band</td>
        <td>Fitness</td>
        <td>2</td>
      </tr>
      <tr>
        <td>244wgerg2</td>
        <td>Blue T-Shirt</td>
        <td>Clothing</td>
        <td>25</td>
      </tr>
      <tr>
        <td>h456wer53</td>
        <td>Bracelet</td>
        <td>Accessories</td>
        <td>73</td>
      </tr>
    </tbody>
  </table>
</div>

Scroll

Scrolling in a template can be accomplished with the table-responsive class.

Code	Name	Category	Quantity	Code	Name	Category	Quantity
f230fh0g3	Bamboo Watch	Accessories	24	f230fh0g3	Bamboo Watch	Accessories	24
nvklal433	Black Watch	Accessories	61	nvklal433	Black Watch	Accessories	61
zz21cz3c1	Blue Band	Fitness	2	zz21cz3c1	Blue Band	Fitness	2
244wgerg2	Blue T-Shirt	Clothing	25	244wgerg2	Blue T-Shirt	Clothing	25
h456wer53	Bracelet	Accessories	73	h456wer53	Bracelet	Accessories	73

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>f230fh0g3</td>
        <td>Bamboo Watch</td>
        <td>Accessories</td>
        <td>24</td>
        <td>f230fh0g3</td>
        <td>Bamboo Watch</td>
        <td>Accessories</td>
        <td>24</td>
      </tr>
      <tr>
        <td>nvklal433</td>
        <td>Black Watch</td>
        <td>Accessories</td>
        <td>61</td>
        <td>nvklal433</td>
        <td>Black Watch</td>
        <td>Accessories</td>
        <td>61</td>
      </tr>
      <tr>
        <td>zz21cz3c1</td>
        <td>Blue Band</td>
        <td>Fitness</td>
        <td>2</td>
        <td>zz21cz3c1</td>
        <td>Blue Band</td>
        <td>Fitness</td>
        <td>2</td>
      </tr>
      <tr>
        <td>244wgerg2</td>
        <td>Blue T-Shirt</td>
        <td>Clothing</td>
        <td>25</td>
        <td>244wgerg2</td>
        <td>Blue T-Shirt</td>
        <td>Clothing</td>
        <td>25</td>
      </tr>
      <tr>
        <td>h456wer53</td>
        <td>Bracelet</td>
        <td>Accessories</td>
        <td>73</td>
        <td>h456wer53</td>
        <td>Bracelet</td>
        <td>Accessories</td>
        <td>73</td>
      </tr>
    </tbody>
  </table>
</div>

Accessibility

Use semantic HTML elements (table, thead, tbody, tfoot, tr, th, td) to build the table structure. This helps assistive technologies interpret and convey the table's content accurately.
Ensure full keyboard navigation support within the table, allowing users to navigate through rows and cells using arrow keys and standard keyboard controls.
Properly manage focus so that keyboard users can easily identify their location within the table. Visual indicators (e.g., highlighting) can help convey focus.
Ensure that table cell content is clear, concise, and meaningful. Avoid using vague or ambiguous labels, acronyms, or abbreviations.
Ensure sufficient color contrast between text and background colors within the table to make the content readable for users with low vision or color blindness.
If the table is sortable, provide accessible mechanisms for users to understand and activate the sorting feature, such as ARIA attributes and clear labels.