Web View Colonnade

Build HTML tables using colonnade and rendering with the web-view library in Haskell.

This library provides functionality similar to lucid-colonnade and blaze-colonnade, but for the web-view library. It lets you build complex HTML tables with minimal boilerplate.

Installation

Add the following to your package.yaml or .cabal file:

dependencies:
  - colonnade
  - web-view
  - web-view-colonnade

Examples

Basic Example

{-# LANGUAGE OverloadedStrings #-}

import qualified Data.Text as T
import qualified Colonnade as C
import qualified Web.View.View as V
import qualified Web.View.Element as E
import Web.View (renderText)
import WebView.Colonnade

-- Define a data type to represent our data
data Person = Person
  { name :: T.Text
  , age :: Int
  }

-- Define some data
people :: [Person]
people =
  [ Person "Alice" 30
  , Person "Bob" 25
  , Person "Carol" 35
  ]

-- Define the table structure
personTable :: C.Colonnade C.Headed Person (V.View c ())
personTable = mconcat
  [ C.headed "Name" (E.text . name)
  , C.headed "Age" (E.text . T.pack . show . age)
  ]

main :: IO ()
main = do
  -- Render a table with custom attributes
  let html = encodeHtmlTable (V.extClass "person-table") personTable people
  putStrLn $ renderText html

This produces:

<table class='person-table'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Carol</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

Cell Attributes

The Cell type allows you to add attributes to individual table cells:

personCellTable :: C.Colonnade C.Headed Person (Cell c)
personCellTable = mconcat
  [ C.headed "Name" (\p -> Cell (V.extClass "name-cell") (E.text $ name p))
  , C.headed "Age" (\p -> Cell (V.extClass "age-cell") (E.text . T.pack . show $ age p))
  ]

main :: IO ()
main = do
  let html = encodeCellTable (V.extClass "person-table") personCellTable people
  putStrLn $ renderText html

This will render each cell with the appropriate class attributes.

Contributing

We welcome contributions to web-view-colonnade! This project uses a nix-based devenv shell for development.

Setting Up the Development Environment

1. Make sure you have Nix installed
2. Install devenv
3. Clone this repository:

   git clone https://github.com/lorenzo/web-view-colonnade.git
   cd web-view-colonnade
   

4. Start the development shell:

   devenv shell
   

5. Build the project:

   cabal build
   

6. Run the tests:

   cabal test
   

Pull Requests

1. Fork the repository
2. Create a new branch for your feature
3. Add tests for your new feature
4. Ensure all tests pass
5. Submit a pull request

License

This project is licensed under the MIT license - see the LICENSE file for details.