├── images ├── csv.png ├── json.png ├── pdf.png ├── excel.png ├── export.png ├── search.png ├── Alson GC.jpg ├── Jeet Saru.jpg ├── Alex Gonley.jpg ├── html_table.jpg ├── screenshot.jpg ├── Sarita Limbu.jpg ├── Sonal Gharti.jpg └── Zinzu Chan Lee.jpg ├── README.md ├── style.css ├── script.js └── index.html /images/csv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/csv.png -------------------------------------------------------------------------------- /images/json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/json.png -------------------------------------------------------------------------------- /images/pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/pdf.png -------------------------------------------------------------------------------- /images/excel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/excel.png -------------------------------------------------------------------------------- /images/export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/export.png -------------------------------------------------------------------------------- /images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/search.png -------------------------------------------------------------------------------- /images/Alson GC.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/Alson GC.jpg -------------------------------------------------------------------------------- /images/Jeet Saru.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/Jeet Saru.jpg -------------------------------------------------------------------------------- /images/Alex Gonley.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/Alex Gonley.jpg -------------------------------------------------------------------------------- /images/html_table.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/html_table.jpg -------------------------------------------------------------------------------- /images/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/screenshot.jpg -------------------------------------------------------------------------------- /images/Sarita Limbu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/Sarita Limbu.jpg -------------------------------------------------------------------------------- /images/Sonal Gharti.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/Sonal Gharti.jpg -------------------------------------------------------------------------------- /images/Zinzu Chan Lee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design/HEAD/images/Zinzu Chan Lee.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive HTML Table With Pure CSS - Web Design UI Design 2 | ![HTML Table UI Design](images/screenshot.jpg) 3 | Without using CSS frameworks we'll build **Responsive HTML Table**. So, with pure CSS I'll show you how to create **Glassmorphism Responsive HTML Table**. Let's take UI design to next level. 4 | 5 | Code written by: 6 | 👨🏻‍⚕️ Coding Design (Jeet Saru) 7 | 8 | > You can do whatever you want with the code. However if you love my content, 9 | > you can **SUBSCRIBED** my YouTube Channel. 10 | 11 | 🌎link: www.youtube.com/codingdesign 12 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Responsive HTML Table With Pure CSS - Web Design/UI Design 3 | 4 | Code written by: 5 | 👨🏻‍⚕️ Coding Design (Jeet Saru) 6 | 7 | > You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel. 8 | 9 | 🌎link: www.youtube.com/codingdesign 10 | */ 11 | 12 | * { 13 | margin: 0; 14 | padding: 0; 15 | 16 | box-sizing: border-box; 17 | font-family: sans-serif; 18 | } 19 | @media print { 20 | .table, .table__body { 21 | overflow: visible; 22 | height: auto !important; 23 | width: auto !important; 24 | } 25 | } 26 | 27 | /*@page { 28 | size: landscape; 29 | margin: 0; 30 | }*/ 31 | 32 | body { 33 | min-height: 100vh; 34 | background: url(images/html_table.jpg) center / cover; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | } 39 | 40 | main.table { 41 | width: 82vw; 42 | height: 90vh; 43 | background-color: #fff5; 44 | 45 | backdrop-filter: blur(7px); 46 | box-shadow: 0 .4rem .8rem #0005; 47 | border-radius: .8rem; 48 | 49 | overflow: hidden; 50 | } 51 | 52 | .table__header { 53 | width: 100%; 54 | height: 10%; 55 | background-color: #fff4; 56 | padding: .8rem 1rem; 57 | 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | } 62 | 63 | .table__header .input-group { 64 | width: 35%; 65 | height: 100%; 66 | background-color: #fff5; 67 | padding: 0 .8rem; 68 | border-radius: 2rem; 69 | 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | 74 | transition: .2s; 75 | } 76 | 77 | .table__header .input-group:hover { 78 | width: 45%; 79 | background-color: #fff8; 80 | box-shadow: 0 .1rem .4rem #0002; 81 | } 82 | 83 | .table__header .input-group img { 84 | width: 1.2rem; 85 | height: 1.2rem; 86 | } 87 | 88 | .table__header .input-group input { 89 | width: 100%; 90 | padding: 0 .5rem 0 .3rem; 91 | background-color: transparent; 92 | border: none; 93 | outline: none; 94 | } 95 | 96 | .table__body { 97 | width: 95%; 98 | max-height: calc(89% - 1.6rem); 99 | background-color: #fffb; 100 | 101 | margin: .8rem auto; 102 | border-radius: .6rem; 103 | 104 | overflow: auto; 105 | overflow: overlay; 106 | } 107 | 108 | 109 | .table__body::-webkit-scrollbar{ 110 | width: 0.5rem; 111 | height: 0.5rem; 112 | } 113 | 114 | .table__body::-webkit-scrollbar-thumb{ 115 | border-radius: .5rem; 116 | background-color: #0004; 117 | visibility: hidden; 118 | } 119 | 120 | .table__body:hover::-webkit-scrollbar-thumb{ 121 | visibility: visible; 122 | } 123 | 124 | 125 | table { 126 | width: 100%; 127 | } 128 | 129 | td img { 130 | width: 36px; 131 | height: 36px; 132 | margin-right: .5rem; 133 | border-radius: 50%; 134 | 135 | vertical-align: middle; 136 | } 137 | 138 | table, th, td { 139 | border-collapse: collapse; 140 | padding: 1rem; 141 | text-align: left; 142 | } 143 | 144 | thead th { 145 | position: sticky; 146 | top: 0; 147 | left: 0; 148 | background-color: #d5d1defe; 149 | cursor: pointer; 150 | text-transform: capitalize; 151 | } 152 | 153 | tbody tr:nth-child(even) { 154 | background-color: #0000000b; 155 | } 156 | 157 | tbody tr { 158 | --delay: .1s; 159 | transition: .5s ease-in-out var(--delay), background-color 0s; 160 | } 161 | 162 | tbody tr.hide { 163 | opacity: 0; 164 | transform: translateX(100%); 165 | } 166 | 167 | tbody tr:hover { 168 | background-color: #fff6 !important; 169 | } 170 | 171 | tbody tr td, 172 | tbody tr td p, 173 | tbody tr td img { 174 | transition: .2s ease-in-out; 175 | } 176 | 177 | tbody tr.hide td, 178 | tbody tr.hide td p { 179 | padding: 0; 180 | font: 0 / 0 sans-serif; 181 | transition: .2s ease-in-out .5s; 182 | } 183 | 184 | tbody tr.hide td img { 185 | width: 0; 186 | height: 0; 187 | transition: .2s ease-in-out .5s; 188 | } 189 | 190 | .status { 191 | padding: .4rem 0; 192 | border-radius: 2rem; 193 | text-align: center; 194 | } 195 | 196 | .status.delivered { 197 | background-color: #86e49d; 198 | color: #006b21; 199 | } 200 | 201 | .status.cancelled { 202 | background-color: #d893a3; 203 | color: #b30021; 204 | } 205 | 206 | .status.pending { 207 | background-color: #ebc474; 208 | } 209 | 210 | .status.shipped { 211 | background-color: #6fcaea; 212 | } 213 | 214 | 215 | @media (max-width: 1000px) { 216 | td:not(:first-of-type) { 217 | min-width: 12.1rem; 218 | } 219 | } 220 | 221 | thead th span.icon-arrow { 222 | display: inline-block; 223 | width: 1.3rem; 224 | height: 1.3rem; 225 | border-radius: 50%; 226 | border: 1.4px solid transparent; 227 | 228 | text-align: center; 229 | font-size: 1rem; 230 | 231 | margin-left: .5rem; 232 | transition: .2s ease-in-out; 233 | } 234 | 235 | thead th:hover span.icon-arrow{ 236 | border: 1.4px solid #6c00bd; 237 | } 238 | 239 | thead th:hover { 240 | color: #6c00bd; 241 | } 242 | 243 | thead th.active span.icon-arrow{ 244 | background-color: #6c00bd; 245 | color: #fff; 246 | } 247 | 248 | thead th.asc span.icon-arrow{ 249 | transform: rotate(180deg); 250 | } 251 | 252 | thead th.active,tbody td.active { 253 | color: #6c00bd; 254 | } 255 | 256 | .export__file { 257 | position: relative; 258 | } 259 | 260 | .export__file .export__file-btn { 261 | display: inline-block; 262 | width: 2rem; 263 | height: 2rem; 264 | background: #fff6 url(images/export.png) center / 80% no-repeat; 265 | border-radius: 50%; 266 | transition: .2s ease-in-out; 267 | } 268 | 269 | .export__file .export__file-btn:hover { 270 | background-color: #fff; 271 | transform: scale(1.15); 272 | cursor: pointer; 273 | } 274 | 275 | .export__file input { 276 | display: none; 277 | } 278 | 279 | .export__file .export__file-options { 280 | position: absolute; 281 | right: 0; 282 | 283 | width: 12rem; 284 | border-radius: .5rem; 285 | overflow: hidden; 286 | text-align: center; 287 | 288 | opacity: 0; 289 | transform: scale(.8); 290 | transform-origin: top right; 291 | 292 | box-shadow: 0 .2rem .5rem #0004; 293 | 294 | transition: .2s; 295 | } 296 | 297 | .export__file input:checked + .export__file-options { 298 | opacity: 1; 299 | transform: scale(1); 300 | z-index: 100; 301 | } 302 | 303 | .export__file .export__file-options label{ 304 | display: block; 305 | width: 100%; 306 | padding: .6rem 0; 307 | background-color: #f2f2f2; 308 | 309 | display: flex; 310 | justify-content: space-around; 311 | align-items: center; 312 | 313 | transition: .2s ease-in-out; 314 | } 315 | 316 | .export__file .export__file-options label:first-of-type{ 317 | padding: 1rem 0; 318 | background-color: #86e49d !important; 319 | } 320 | 321 | .export__file .export__file-options label:hover{ 322 | transform: scale(1.05); 323 | background-color: #fff; 324 | cursor: pointer; 325 | } 326 | 327 | .export__file .export__file-options img{ 328 | width: 2rem; 329 | height: auto; 330 | } 331 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /** 2 | Responsive HTML Table With Pure CSS - Web Design/UI Design 3 | 4 | Code written by: 5 | 👨🏻‍⚕️ @Coding Design (Jeet Saru) 6 | 7 | > You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel. 8 | 9 | 🌎link: www.youtube.com/codingdesign 10 | */ 11 | 12 | const search = document.querySelector('.input-group input'), 13 | table_rows = document.querySelectorAll('tbody tr'), 14 | table_headings = document.querySelectorAll('thead th'); 15 | 16 | // 1. Searching for specific data of HTML table 17 | search.addEventListener('input', searchTable); 18 | 19 | function searchTable() { 20 | table_rows.forEach((row, i) => { 21 | let table_data = row.textContent.toLowerCase(), 22 | search_data = search.value.toLowerCase(); 23 | 24 | row.classList.toggle('hide', table_data.indexOf(search_data) < 0); 25 | row.style.setProperty('--delay', i / 25 + 's'); 26 | }) 27 | 28 | document.querySelectorAll('tbody tr:not(.hide)').forEach((visible_row, i) => { 29 | visible_row.style.backgroundColor = (i % 2 == 0) ? 'transparent' : '#0000000b'; 30 | }); 31 | } 32 | 33 | // 2. Sorting | Ordering data of HTML table 34 | 35 | table_headings.forEach((head, i) => { 36 | let sort_asc = true; 37 | head.onclick = () => { 38 | table_headings.forEach(head => head.classList.remove('active')); 39 | head.classList.add('active'); 40 | 41 | document.querySelectorAll('td').forEach(td => td.classList.remove('active')); 42 | table_rows.forEach(row => { 43 | row.querySelectorAll('td')[i].classList.add('active'); 44 | }) 45 | 46 | head.classList.toggle('asc', sort_asc); 47 | sort_asc = head.classList.contains('asc') ? false : true; 48 | 49 | sortTable(i, sort_asc); 50 | } 51 | }) 52 | 53 | 54 | function sortTable(column, sort_asc) { 55 | [...table_rows].sort((a, b) => { 56 | let first_row = a.querySelectorAll('td')[column].textContent.toLowerCase(), 57 | second_row = b.querySelectorAll('td')[column].textContent.toLowerCase(); 58 | 59 | return sort_asc ? (first_row < second_row ? 1 : -1) : (first_row < second_row ? -1 : 1); 60 | }) 61 | .map(sorted_row => document.querySelector('tbody').appendChild(sorted_row)); 62 | } 63 | 64 | // 3. Converting HTML table to PDF 65 | 66 | const pdf_btn = document.querySelector('#toPDF'); 67 | const customers_table = document.querySelector('#customers_table'); 68 | 69 | 70 | const toPDF = function (customers_table) { 71 | const html_code = ` 72 | 73 | 74 |
${customers_table.innerHTML}
`; 75 | 76 | const new_window = window.open(); 77 | new_window.document.write(html_code); 78 | 79 | setTimeout(() => { 80 | new_window.print(); 81 | new_window.close(); 82 | }, 400); 83 | } 84 | 85 | pdf_btn.onclick = () => { 86 | toPDF(customers_table); 87 | } 88 | 89 | // 4. Converting HTML table to JSON 90 | 91 | const json_btn = document.querySelector('#toJSON'); 92 | 93 | const toJSON = function (table) { 94 | let table_data = [], 95 | t_head = [], 96 | 97 | t_headings = table.querySelectorAll('th'), 98 | t_rows = table.querySelectorAll('tbody tr'); 99 | 100 | for (let t_heading of t_headings) { 101 | let actual_head = t_heading.textContent.trim().split(' '); 102 | 103 | t_head.push(actual_head.splice(0, actual_head.length - 1).join(' ').toLowerCase()); 104 | } 105 | 106 | t_rows.forEach(row => { 107 | const row_object = {}, 108 | t_cells = row.querySelectorAll('td'); 109 | 110 | t_cells.forEach((t_cell, cell_index) => { 111 | const img = t_cell.querySelector('img'); 112 | if (img) { 113 | row_object['customer image'] = decodeURIComponent(img.src); 114 | } 115 | row_object[t_head[cell_index]] = t_cell.textContent.trim(); 116 | }) 117 | table_data.push(row_object); 118 | }) 119 | 120 | return JSON.stringify(table_data, null, 4); 121 | } 122 | 123 | json_btn.onclick = () => { 124 | const json = toJSON(customers_table); 125 | downloadFile(json, 'json') 126 | } 127 | 128 | // 5. Converting HTML table to CSV File 129 | 130 | const csv_btn = document.querySelector('#toCSV'); 131 | 132 | const toCSV = function (table) { 133 | // Code For SIMPLE TABLE 134 | // const t_rows = table.querySelectorAll('tr'); 135 | // return [...t_rows].map(row => { 136 | // const cells = row.querySelectorAll('th, td'); 137 | // return [...cells].map(cell => cell.textContent.trim()).join(','); 138 | // }).join('\n'); 139 | 140 | const t_heads = table.querySelectorAll('th'), 141 | tbody_rows = table.querySelectorAll('tbody tr'); 142 | 143 | const headings = [...t_heads].map(head => { 144 | let actual_head = head.textContent.trim().split(' '); 145 | return actual_head.splice(0, actual_head.length - 1).join(' ').toLowerCase(); 146 | }).join(',') + ',' + 'image name'; 147 | 148 | const table_data = [...tbody_rows].map(row => { 149 | const cells = row.querySelectorAll('td'), 150 | img = decodeURIComponent(row.querySelector('img').src), 151 | data_without_img = [...cells].map(cell => cell.textContent.replace(/,/g, ".").trim()).join(','); 152 | 153 | return data_without_img + ',' + img; 154 | }).join('\n'); 155 | 156 | return headings + '\n' + table_data; 157 | } 158 | 159 | csv_btn.onclick = () => { 160 | const csv = toCSV(customers_table); 161 | downloadFile(csv, 'csv', 'customer orders'); 162 | } 163 | 164 | // 6. Converting HTML table to EXCEL File 165 | 166 | const excel_btn = document.querySelector('#toEXCEL'); 167 | 168 | const toExcel = function (table) { 169 | // Code For SIMPLE TABLE 170 | // const t_rows = table.querySelectorAll('tr'); 171 | // return [...t_rows].map(row => { 172 | // const cells = row.querySelectorAll('th, td'); 173 | // return [...cells].map(cell => cell.textContent.trim()).join('\t'); 174 | // }).join('\n'); 175 | 176 | const t_heads = table.querySelectorAll('th'), 177 | tbody_rows = table.querySelectorAll('tbody tr'); 178 | 179 | const headings = [...t_heads].map(head => { 180 | let actual_head = head.textContent.trim().split(' '); 181 | return actual_head.splice(0, actual_head.length - 1).join(' ').toLowerCase(); 182 | }).join('\t') + '\t' + 'image name'; 183 | 184 | const table_data = [...tbody_rows].map(row => { 185 | const cells = row.querySelectorAll('td'), 186 | img = decodeURIComponent(row.querySelector('img').src), 187 | data_without_img = [...cells].map(cell => cell.textContent.trim()).join('\t'); 188 | 189 | return data_without_img + '\t' + img; 190 | }).join('\n'); 191 | 192 | return headings + '\n' + table_data; 193 | } 194 | 195 | excel_btn.onclick = () => { 196 | const excel = toExcel(customers_table); 197 | downloadFile(excel, 'excel'); 198 | } 199 | 200 | const downloadFile = function (data, fileType, fileName = '') { 201 | const a = document.createElement('a'); 202 | a.download = fileName; 203 | const mime_types = { 204 | 'json': 'application/json', 205 | 'csv': 'text/csv', 206 | 'excel': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 207 | } 208 | a.href = ` 209 | data:${mime_types[fileType]};charset=utf-8,${encodeURIComponent(data)} 210 | `; 211 | document.body.appendChild(a); 212 | a.click(); 213 | a.remove(); 214 | } 215 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Convert | Export html Table to CSV & EXCEL File 19 | 20 | 21 | 22 | 23 |
24 |
25 |

Customer's Orders

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 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 183 | 184 | 185 | 186 |
Id ↑ Customer ↑ Location ↑ Order Date ↑ Status ↑ Amount ↑
1 Zinzu Chan Lee Seoul 17 Dec, 2022 61 |

Delivered

62 | 		$128.90
2 Jeet Saru Kathmandu 27 Aug, 2023 71 |

Cancelled

72 | 		$5350.50
3 Sonal Gharti Tokyo 14 Mar, 2023 81 |

Shipped

82 | 		$210.40
4 Alson GC New Delhi 25 May, 2023 91 |

Delivered

92 | 		$149.70
5 Sarita Limbu Paris 23 Apr, 2023 101 |

Pending

102 | 		$399.99
6 Alex Gonley London 23 Apr, 2023 111 |

Cancelled

112 | 		$399.99
7 Jeet Saru New York 20 May, 2023 121 |

Delivered

122 | 		$399.99
8 Aayat Ali Khan Islamabad 30 Feb, 2023 131 |

Pending

132 | 		$149.70
9 Alson GC Dhaka 22 Dec, 2023 141 |

Cancelled

142 | 		$249.99
9 Alson GC Dhaka 22 Dec, 2023 151 |

Cancelled

152 | 		$249.99
9 Alson GC Dhaka 22 Dec, 2023 161 |

Cancelled

162 | 		$249.99
9 Alson GC Dhaka 22 Dec, 2023 171 |

Cancelled

172 | 		$249.99
9 Alson GC Dhaka 22 Dec, 2023 181 |

Cancelled

182 | 		$249.99
187 |
188 |
189 | 190 | 191 | 192 | 193 | 194 | --------------------------------------------------------------------------------