What is the best way to incorporate a toggleable grid or table view into my project?

Question

What is the best way to incorporate a toggleable grid or table view into my project?

Recently, I've set up a grid view for some content using an unordered list to create a visually appealing block layout. Now, I've been given the task of presenting the same data in a table format. The data also involves various actions that can be performed on it. While the visual switch is intended for shorter lists, there could be longer lists as well.

I'm considering reusing the existing structure of the unordered list and enhancing it with additional elements to simulate a table view, which doesn't seem too difficult. Another option is to redo everything in a table format and then use CSS to implement the grid view.

My main query is regarding the approaches to tackle this challenge. One thought is to duplicate my markup - implementing both views and toggling between them. However, in an AJAX-intensive application, this would mean performing double the DOM manipulations to incorporate these changes.

Is there a recommended practice for seamlessly switching between views like this? I'm eager to hear about various ideas and practical examples from those who have worked on similar projects.

To illustrate further, I've included a jsFiddle demonstrating the use of an unordered list as the foundation. Can anyone provide sample CSS code that utilizes a table as the core structure?

html css datagrid html-lists

Answer 1

Answer №1

Unfortunately, no one opted for a table-centric approach, so here is the code for a ul>li centric approach:

HTML:

<div class="controls">
    <a href="#" class="list active">List</a>
    <a href="#" class="grid">Grid</a>
</div>

<div id="wrapper">
<ul class="list">
    <li class="header"><h2 class="name">Name</h2>
        <p class="date">Start Date</p>
        <p class="title">Title</p>
        <div class="image">Image</div></li>
    <li class="even"><h2 class="name">Adam Ant</h2>
        <p class="date">1995</p>
        <p class="title">Specialist</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="odd"><h2 class="name">Brian Box</h2>
        <p class="date">2005</p>
        <p class="title">Specialist</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="even"><h2 class="name">Clara Clock</h2>
        <p class="date">2010</p>
        <p class="title">Manager</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="odd"><h2 class="name">Darla Dock</h2>
        <p class="date">1996</p>
        <p class="title">Editor</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
</ul>
</div>

CSS:

body {
    font-family: sans-serif;
}
.controls {
    text-align: right;
    width: 500px;
}
.controls a {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding: 6px;
    text-decoration: none;
}
.controls a.active {
    background-color: blue;
}

#wrapper .list li { 
    width: 500px; 
    position: relative;
    height: 30px;
}
#wrapper .list li.odd * {
    background-color: #eee;
}
#wrapper .list li.header {
    background-color: #666;
    color: #fff;
}
#wrapper .list li * {
    position: absolute;
    line-height: 1;
    top: 0;
    display: block;
    height: 30px;
}
#wrapper .list li h2.name {
    left: 0;
    width: 150px;

}
#wrapper .list li p.date {
    left: 150px;
    width: 100px;
}
#wrapper .list li p.title {
    left: 250px;
    width: 100px;
}
#wrapper .list li div.image {
    left: 350px;
    width: 150px;
}
#wrapper .list li div.image img {
    height: 20px;
    width: 20px
    margin: 0 auto;
}

#wrapper .grid li { 
    display: inline-block;
    width: 200px; 
    height: 200px;
    position: relative;
    overflow: hidden;
}
#wrapper .grid li.header {
    display: none;
}
#wrapper .grid h2.name {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    line-height: 2;
    height: 30px;
}
#wrapper .grid p.date {
    display: none;
}
#wrapper .grid p.title {
    display: none;
}

JavaScript (using MooTools):

$$('a').addEvent('click', function(){
    $$('.controls a').toggleClass('active');
    $$('ul').toggleClass('list').toggleClass('grid');
    return false;
})

Answer 2

Unfortunately, no one opted for a table-centric approach, so here is the code for a ul>li centric approach:

HTML:

<div class="controls">
    <a href="#" class="list active">List</a>
    <a href="#" class="grid">Grid</a>
</div>

<div id="wrapper">
<ul class="list">
    <li class="header"><h2 class="name">Name</h2>
        <p class="date">Start Date</p>
        <p class="title">Title</p>
        <div class="image">Image</div></li>
    <li class="even"><h2 class="name">Adam Ant</h2>
        <p class="date">1995</p>
        <p class="title">Specialist</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="odd"><h2 class="name">Brian Box</h2>
        <p class="date">2005</p>
        <p class="title">Specialist</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="even"><h2 class="name">Clara Clock</h2>
        <p class="date">2010</p>
        <p class="title">Manager</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
    <li class="odd"><h2 class="name">Darla Dock</h2>
        <p class="date">1996</p>
        <p class="title">Editor</p>
        <div class="image"><img src="http://www.placehold.it/200x200" alt=""></div></li>
</ul>
</div>

CSS:

body {
    font-family: sans-serif;
}
.controls {
    text-align: right;
    width: 500px;
}
.controls a {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding: 6px;
    text-decoration: none;
}
.controls a.active {
    background-color: blue;
}

#wrapper .list li { 
    width: 500px; 
    position: relative;
    height: 30px;
}
#wrapper .list li.odd * {
    background-color: #eee;
}
#wrapper .list li.header {
    background-color: #666;
    color: #fff;
}
#wrapper .list li * {
    position: absolute;
    line-height: 1;
    top: 0;
    display: block;
    height: 30px;
}
#wrapper .list li h2.name {
    left: 0;
    width: 150px;

}
#wrapper .list li p.date {
    left: 150px;
    width: 100px;
}
#wrapper .list li p.title {
    left: 250px;
    width: 100px;
}
#wrapper .list li div.image {
    left: 350px;
    width: 150px;
}
#wrapper .list li div.image img {
    height: 20px;
    width: 20px
    margin: 0 auto;
}

#wrapper .grid li { 
    display: inline-block;
    width: 200px; 
    height: 200px;
    position: relative;
    overflow: hidden;
}
#wrapper .grid li.header {
    display: none;
}
#wrapper .grid h2.name {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    line-height: 2;
    height: 30px;
}
#wrapper .grid p.date {
    display: none;
}
#wrapper .grid p.title {
    display: none;
}

JavaScript (using MooTools):

$$('a').addEvent('click', function(){
    $$('.controls a').toggleClass('active');
    $$('ul').toggleClass('list').toggleClass('grid');
    return false;
})

What is the best way to incorporate a toggleable grid or table view into my project?

Answer №1

Similar questions

Tips for preventing countdown from resetting when you refresh the page

Modifying the color of drawings on a Javascript canvas

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

How can I create space in between each column underline using css?

Align a flex item at the center of its parent when the parent has a flex direction of column

Constructing an interactive table from a JSON dataset using Node.js and Express

Substitute the outdated body element with the freshly loaded element

Discovering keywords within HTML code and concealing particular content through jQuery

Step-by-step guide on displaying a window containing text when hovering over a CSS class

Having trouble making the menu stay at the top of the page in IE7

What is the best way to loop through each word within an element and selectively enclose specific matches?

What steps can be taken to identify the script responsible for preventing text highlighting or right clicking on a webpage?

Concealing a CSS class with PHP within the Wordpress Woocommerce platform

How can we minimize the data contained in JSON HTML markup?

Is it possible to set the radius of a d3.js circle using a style attribute?

Loop through every list item within each unordered list using JQuery

Input field in a tableview

PHP: Invoking a function within the HTML content of a variable

Why does a relatively positioned element always begin at the top corner of the window?

textarea element enclosed by a div tag