Giter Club home page Giter Club logo

table_cloth's Introduction

Table Cloth

Table Cloth gives you an easy to use DSL for creating and rendering tables in rails.

The primary goal of Table Cloth is to remove the complexity that usually comes with making tables with dynamic content. HTML Tables frequently can get out of hand when you start to add conditionals, removing columns, etc..

Follow me! @robertoross

Build Status

Installation

Add this line to your application's Gemfile:

gem 'table_cloth'

And then execute:

$ bundle

Usage

Table Cloth can use defined tables in app/tables or you can build them on the fly.

Table models can be generated using rails generators.

$ rails g table User

It will make this:

class UserTable < TableCloth::Base
  # Define columns with the #column method
  # column :name, :email

  # Columns can be provided a block
  #
  # column :name do |object|
  #   object.name.downcase
  # end
  #
  # Columns can also have conditionals if you want.
  # The conditions are checked against the table's methods.
  # As a convience, the table has a #view method which will return the current view context.
  # This gives you access to current user, params, etc...
  #
  # column :email, if: :admin?
  #
  # def admin?
  #   view.current_user.admin?
  # end
  #
  # Actions give you the ability to create a column for any actions you'd like to provide.
  # Pass a block with an arity of 2, (object, view context).
  # You can add as many actions as you want.
  #
  # actions do
  #   action {|object| link_to "Edit", edit_object_path(object) }
  # end
end

Go ahead and modify it to suit your needs, pick the columns, conditions, actions, etc...

In your view, you would then use this code:

<%= simple_table_for @users, with: UserTable %>

The second approach to making tables with Table Cloth is in the view.

<%= simple_table_for @users do |t| %>
  <% t.column :name %>
  <% t.column :email %>
  <% t.actions do %>
    <% action {|user| link_to "View", user } %>
  <% end %>
<% end %>

Columns

You can create your own column by making a class that responds to .value(object, view)

class ImageColumn < TableCloth::Column
  def value(object, view)
    view.raw(view.image_tag(object.image_url))
  end
end

In your table

<%= simple_table_for @users do |table| %>
  <% table.column :name %>
  <% table.column :image, using: ImageColumn %>
<% end %>

Actions

A lot of tables have an actions column to give you the full CRUD effect. They can be painful but Table Cloth incorporates a way to easily add them to your definition.

class UserTable < TableCloth::Base
  column :name

  actions do
    action {|object| link_to 'View', object }
    action(if: :admin?) {|object| link_to 'Delete', object, method: :delete }
  end

  def admin?
    view.current_user.admin?
  end
end

Configuration

Create an initializer called table_cloth.rb

Configuration looks like this:

TableCloth::Configuration.configure do |config|
  config.table.class = 'table table-bordered'
  config.thead.class = ''
  config.tbody.class = ''
  config.tr.class =''
  config.th.class =''
  config.td.class =''
end

You can also configure specific tables separately.

class UserTable < TableCloth::Base
  column :name, :email

  actions do
    action {|object| link_to "Edit", edit_object_path(object) }
  end

  config.table.class = ''
  config.thead.class = ''
  config.th.class    = ''
  config.tbody.class = ''
  config.tr.class    = ''
  config.td.class    = ''
end

You can set any value on table element configurations. For example:

config.table.cellpadding = 1
config.td.valign = 'top'

You also have the option to specify options on a specific column with the td_options key.

class UserTable < TableCloth::Base
  column :name, td_options: { class: "awesome-column" }
end

Not good enough? Fine... you can do row / column specific config as well for a TD.

class UserTable < TableCloth::Base
  column :name do |user|
    [user.name, {class: "#{user.type}-user"}]
  end
end

This would render something alow the lines of:

<td class="admin-user">Robert Ross</td>

Thanks

  • TableCloth was built during my open source time at philosophie

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. CREATE A SPEC.
  4. Commit your changes (git commit -am 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create new Pull Request

table_cloth's People

Contributors

bobbytables avatar alexgb avatar jlsuttles avatar yurikoval avatar

Watchers

 avatar James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.