x
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
<div class="p-8"> <div data-controller="midwest-table" class="midwest-table-wrapper"> <div class="midwest-table-toolbar"> <div class="flex items-center gap-3 w-full"> <input type="text" placeholder="Search…" class="midwest-input flex-1 max-w-xs" autocomplete="off"> <select class="midwest-input w-auto"> <option value="">All roles</option> <option>Engineer</option> <option>Designer</option> <option>Manager</option> </select> </div> </div> <div class="midwest-table-loading-overlay" aria-hidden="true"> <div class="midwest-loading-icon" role="img" aria-label="Loading" decorative="true"> <div class="midwest-loading-icon-inner"> <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true"> <circle cx="15" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="60" cy="15" r="9" fill-opacity="0.3"> <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="105" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> </svg> </div> </div> </div> <div class="midwest-table-scroll"> <table class="midwest-table"> <caption class="sr-only">Team members</caption> <thead class="midwest-table-head"> <tr> <th scope="col" class="midwest-table-th align-start"> Name </th> <th scope="col" class="midwest-table-th align-start"> Role </th> <th scope="col" class="midwest-table-th align-start"> Status </th> </tr> </thead> <tbody class="midwest-table-body"> <tr class="midwest-table-row"> <td class="midwest-table-td align-start"> Alice Johnson </td> <td class="midwest-table-td align-start"> Engineer </td> <td class="midwest-table-td align-start"> Active </td> </tr> <tr class="midwest-table-row"> <td class="midwest-table-td align-start"> Bob Smith </td> <td class="midwest-table-td align-start"> Designer </td> <td class="midwest-table-td align-start"> Active </td> </tr> <tr class="midwest-table-row"> <td class="midwest-table-td align-start"> Carol White </td> <td class="midwest-table-td align-start"> Manager </td> <td class="midwest-table-td align-start"> Away </td> </tr> <tr class="midwest-table-row"> <td class="midwest-table-td align-start"> David Lee </td> <td class="midwest-table-td align-start"> Engineer </td> <td class="midwest-table-td align-start"> Inactive </td> </tr> <tr class="midwest-table-row"> <td class="midwest-table-td align-start"> Eve Martinez </td> <td class="midwest-table-td align-start"> Designer </td> <td class="midwest-table-td align-start"> Active </td> </tr> </tbody> </table> </div> </div></div>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
<% row_class = Struct.new(:name, :role, :status, keyword_init: true) rows = [ row_class.new(name: 'Alice Johnson', role: 'Engineer', status: 'Active'), row_class.new(name: 'Bob Smith', role: 'Designer', status: 'Active'), row_class.new(name: 'Carol White', role: 'Manager', status: 'Away'), row_class.new(name: 'David Lee', role: 'Engineer', status: 'Inactive'), row_class.new(name: 'Eve Martinez', role: 'Designer', status: 'Active'), ]%><div class="p-8"> <%= midwest_table(collection: rows, caption: 'Team members') do |t| %> <% t.with_toolbar do %> <div class="flex items-center gap-3 w-full"> <input type="text" placeholder="Search…" class="midwest-input flex-1 max-w-xs" autocomplete="off"> <select class="midwest-input w-auto"> <option value="">All roles</option> <option>Engineer</option> <option>Designer</option> <option>Manager</option> </select> </div> <% end %> <% t.with_column('Name', key: :name) %> <% t.with_column('Role', key: :role) %> <% t.with_column('Status', key: :status) %> <% end %></div>With Toolbar
Use the toolbar slot to render a search input, filter controls, or bulk
actions above the table. The toolbar appears inside the table border, above
the scroll wrapper.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Table/with_toolbar
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."