Data Table

.c-table.dataTable

Example of a Data Table used to display structured data in a tabular format. It offers sorting, filtering, and pagination capabilities.

Based on the jQuery DataTable Library, Version 1.13.11
Styling based on the default Table.

Nested Instances

Example

Bezeichnung	Nummer	Status	Zusammensetzung
Hydrophile Salbe (DAB)	1778134800	In Prüfung	Coenzym Q 1 g Vitamin E 1 g Basiscreme DAC ad 100 g	Öffnen Löschen
Cannabisblüten (Typ 1)	1778134800	Archiviert	Coenzym Q 1 g Vitamin E 1 g Basiscreme DAC ad 100 g	Öffnen Löschen
Aqua Purificata	1778134800	Freigegeben	Coenzym Q 1 g Vitamin E 1 g Basiscreme DAC ad 100 g	Öffnen Löschen
Acidum salicylicum (Ph. Eur.)	1778134800	Freigegeben	Coenzym Q 1 g Vitamin E 1 g Basiscreme DAC ad 100 g	Öffnen Löschen
Ethanol 96% V/V	1778134800	Fehler	Clotrimazol 3 g Macrogol-40-glycerolhydroxystearat 5 g Vaselin, weiß ad 100 g	Öffnen Löschen

Show Code

html

<table id="table_id" class="c-table dataTable">
  <thead>
  <tr>
    <th class="col-name">Bezeichnung</th>
    <th class="col-nummer">Nummer</th>
    <th>Status</th>
    <th class="col-zusammensetzung">Zusammensetzung</th>
    <th class="col-menu nosort sorting_disabled"></th>
  </tr>
  </thead>
  <tbody>

  <tr>
    <td><strong>Hydrophile Salbe (DAB)</strong></td>
    <td class="col-nummer">1778134800</td>
    <td><span class="c-tag -small -warning">In Prüfung</span></td>
    <td class="col-zusammensetzung">
      Coenzym Q 1 g<br>
      Vitamin E 1 g<br>
      Basiscreme DAC ad 100 g
    </td>
    <td class="col-menu">
      <div class="c-action-menu h-flex h-flex-row h-end">
        <div class="c-action-menu__row m-y-reset  -last">
          <div class="c-action-menu__dropdown">
            <button type="button" class="c-btn -icon-btn -small -redesign -link">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
              <span class="h-sr-only">Menü</span>
            </button>
            <ul class="c-list -linklist">
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-eye" aria-hidden="true"></i>
                  Öffnen
                </a>
              </li>
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-trash" aria-hidden="true"></i>
                  Löschen
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </td>
  </tr>

  <tr>
    <td class="col-name"><strong>Cannabisblüten (Typ 1)</strong></td>
    <td class="col-nummer">1778134800</td>
    <td><span class="c-tag -small -neutral">Archiviert</span></td>
    <td class="col-zusammensetzung">
      Coenzym Q 1 g<br>
      Vitamin E 1 g<br>
      Basiscreme DAC ad 100 g
    </td>
    <td class="col-menu">
      <div class="c-action-menu h-flex h-flex-row h-end">
        <div class="c-action-menu__row m-y-reset  -last">
          <div class="c-action-menu__dropdown">
            <button type="button" class="c-btn -icon-btn -small -redesign -link">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
              <span class="h-sr-only">Menü</span>
            </button>
            <ul class="c-list -linklist">
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-eye" aria-hidden="true"></i>
                  Öffnen
                </a>
              </li>
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-trash" aria-hidden="true"></i>
                  Löschen
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </td>
  </tr>

  <tr>
    <td><strong>Aqua Purificata</strong></td>
    <td class="col-nummer">1778134800</td>
    <td><span class="c-tag -small -success-dark">Freigegeben</span></td>
    <td class="col-zusammensetzung">
      Coenzym Q 1 g<br>
      Vitamin E 1 g<br>
      Basiscreme DAC ad 100 g
    </td>
    <td class="col-menu">
      <div class="c-action-menu h-flex h-flex-row h-end">
        <div class="c-action-menu__row m-y-reset  -last">
          <div class="c-action-menu__dropdown">
            <button type="button" class="c-btn -icon-btn -small -redesign -link">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
              <span class="h-sr-only">Menü</span>
            </button>
            <ul class="c-list -linklist">
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-eye" aria-hidden="true"></i>
                  Öffnen
                </a>
              </li>
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-trash" aria-hidden="true"></i>
                  Löschen
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </td>
  </tr>

  <tr>
    <td><strong>Acidum salicylicum (Ph. Eur.)</strong></td>
    <td class="col-nummer">1778134800</td>
    <td><span class="c-tag -small -success-dark">Freigegeben</span></td>
    <td class="col-zusammensetzung">
      Coenzym Q 1 g<br>
      Vitamin E 1 g<br>
      Basiscreme DAC ad 100 g
    </td>
    <td class="col-menu">
      <div class="c-action-menu h-flex h-flex-row h-end">
        <div class="c-action-menu__row m-y-reset  -last">
          <div class="c-action-menu__dropdown">
            <button type="button" class="c-btn -icon-btn -small -redesign -link">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
              <span class="h-sr-only">Menü</span>
            </button>
            <ul class="c-list -linklist">
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-eye" aria-hidden="true"></i>
                  Öffnen
                </a>
              </li>
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-trash" aria-hidden="true"></i>
                  Löschen
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </td>
  </tr>

  <tr class="selected">
    <td class="col-name"><strong>Ethanol 96% V/V</strong></td>
    <td class="col-nummer">1778134800</td>
    <td><span class="c-tag -small -error-dark">Fehler</span></td>
    <td class="col-zusammensetzung">
      Clotrimazol 3 g<br>
      Macrogol-40-glycerolhydroxystearat 5 g<br>
      Vaselin, weiß ad 100 g
    </td>
    <td class="col-menu">
      <div class="c-action-menu h-flex h-flex-row h-end">
        <div class="c-action-menu__row m-y-reset  -last">
          <div class="c-action-menu__dropdown">
            <button type="button" class="c-btn -icon-btn -small -redesign -link">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
              <span class="h-sr-only">Menü</span>
            </button>
            <ul class="c-list -linklist">
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-eye" aria-hidden="true"></i>
                  Öffnen
                </a>
              </li>
              <li class="c-list__item">
                <a href="#" class="c-link -icon-left -redesign">
                  <i class="far fa-trash" aria-hidden="true"></i>
                  Löschen
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </td>
  </tr>
  </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

Styling Options

The following styling options are available:

add .col-menu to the th and td elements to remove padding
add .col-right to the th or td element to right align the text
add .center to the th or td element to center align the text
add .selected to the tr element to highlight the selected row
add .sorting-disabled to the th element to disable sorting for that column
add .nosort to hide the sort icon for that column

Initialization

Show Code

javascript

$('#table_id').DataTable({
                "paging":   true,
                "ordering": true,
                "info":     true,
                "order":    [[2, "desc"]],
                "pagingType": "simple_numbers",
                "language": {
                    "decimal": ",",
                    "thousands": ".",
                    "url": "de_DE.txt"
                },
                "stateSave": true,
                "stateDuration": 0,
                "lengthMenu": [[50, 100], [50, 100]],
                "pageLength": 50
            });

Utilities

Atoms

Molecules

Organisms

Templates

Pages

Logger

Data Table

Example

Styling Options

Initialization

Data Table ​

Example ​

Styling Options ​

Initialization ​

Data Table

Example

Styling Options

Initialization