{"id":10353,"date":"2022-08-08T10:59:44","date_gmt":"2022-08-08T08:59:44","guid":{"rendered":"https:\/\/wp-akuten.se\/development-wordpress\/searchable-tables-on-the-website\/"},"modified":"2024-05-22T10:03:32","modified_gmt":"2024-05-22T08:03:32","slug":"searchable-tables-on-the-website","status":"publish","type":"post","link":"https:\/\/wp-akuten.se\/en\/blog\/searchable-tables-on-the-website\/","title":{"rendered":"Searchable tables on the website"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Creating tables on the web that are also readable on mobile and where you don&#8217;t have to scroll sideways can be a challenge!<\/p>\n\n<p class=\"wp-block-paragraph\">There is a very good jqurery library that helps a lot, <a href=\"https:\/\/datatables.net\/manual\/installation\">datatables<\/a>. This gives you functions such as searching, filtering, copying and exporting to Excel and PDF.<\/p>\n\n<p class=\"wp-block-paragraph\">This library is used by a ready-made plugin for WordPress, <a href=\"https:\/\/sv.wordpress.org\/plugins\/tablepress\/\" target=\"_blank\" rel=\"noreferrer noopener\">tablepress<\/a> but if you add it yourself, you can use more functions.<\/p>\n\n<p class=\"wp-block-paragraph\">The table can be filtered in the search box and all columns can be sorted. On a mobile, the table is formatted so you don&#8217;t have to scroll sideways.<\/p>\n\n<p class=\"wp-block-paragraph\">As an added bonus, you can open the table in Excel or copy it!<\/p>\n\n<figure id=\"testtable\" class=\"wp-block-table is-style-stripes\"><table><thead><tr><th><\/th><th>Nr<\/th><th>First name<\/th><th>Last name<\/th><th>Location<\/th><\/tr><\/thead><tbody><tr><td><\/td><td>1<\/td><td>Kalle<\/td><td>Anka<\/td><td>Ankeborg<\/td><\/tr><tr><td><\/td><td>2<\/td><td>Nalle<\/td><td>Puh<\/td><td>Sjumilaskogen<\/td><\/tr><tr><td><\/td><td>3<\/td><td>Mimmi <\/td><td>Pigg<\/td><td>Ankeborg<\/td><\/tr><tr><td><\/td><td>4<\/td><td>Musse <\/td><td>Pigg<\/td><td>Ankeborg<\/td><\/tr><tr><td><\/td><td>5<\/td><td>Nasse<\/td><td>?<\/td><td>Sjumilaskogen<\/td><\/tr><tr><td><\/td><td>6<\/td><td>Emil<\/td><td>Svensson<\/td><td>L\u00f6nneberga<\/td><\/tr><tr><td><\/td><td>7<\/td><td>Ida<\/td><td>Svensson<\/td><td>L\u00f6nneberga<\/td><\/tr><tr><td><\/td><td>8<\/td><td>Ronja<\/td><td>R\u00f6vardotter<\/td><td>Mattisborgen<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Stylish tables can be tricky to create in wordpress, but with the jquery library datatables it is easy.<\/p>\n","protected":false},"author":2,"featured_media":10124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[118,119],"tags":[],"class_list":["type-post","category-blog","category-development-wordpress","entry"],"taxonomy_info":{"category":[{"value":118,"label":"Blog"},{"value":119,"label":"Development WordPress"}]},"featured_image_src_large":["https:\/\/wp-akuten.se\/wp-content\/uploads\/2022\/08\/Tabell.jpeg",800,671,false],"author_info":{"display_name":"Karin H Olsson","author_link":"https:\/\/wp-akuten.se\/en\/author\/adaro3r\/"},"comment_info":0,"category_info":[{"term_id":118,"name":"Blog","slug":"blog","term_group":0,"term_taxonomy_id":118,"taxonomy":"category","description":"","parent":0,"count":7,"filter":"raw","meta":[],"cat_ID":118,"category_count":7,"category_description":"","cat_name":"Blog","category_nicename":"blog","category_parent":0},{"term_id":119,"name":"Development WordPress","slug":"development-wordpress","term_group":0,"term_taxonomy_id":119,"taxonomy":"category","description":"","parent":0,"count":16,"filter":"raw","meta":[],"cat_ID":119,"category_count":16,"category_description":"","cat_name":"Development WordPress","category_nicename":"development-wordpress","category_parent":0}],"tag_info":false,"acf":[],"_links":{"self":[{"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/posts\/10353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/comments?post=10353"}],"version-history":[{"count":1,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/posts\/10353\/revisions"}],"predecessor-version":[{"id":10354,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/posts\/10353\/revisions\/10354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/media\/10124"}],"wp:attachment":[{"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/media?parent=10353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/categories?post=10353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-akuten.se\/en\/wp-json\/wp\/v2\/tags?post=10353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}