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.
Add the following to your package.yaml or .cabal file:
dependencies: - colonnade - web-view - web-view-colonnade{-# 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 htmlThis 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>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 htmlThis will render each cell with the appropriate class attributes.
We welcome contributions to web-view-colonnade! This project uses a nix-based devenv shell for development.
- Make sure you have Nix installed
- Install devenv
- Clone this repository:
git clone https://github.com/lorenzo/web-view-colonnade.git cd web-view-colonnade - Start the development shell:
devenv shell - Build the project:
cabal build - Run the tests:
cabal test
- Fork the repository
- Create a new branch for your feature
- Add tests for your new feature
- Ensure all tests pass
- Submit a pull request
This project is licensed under the MIT license - see the LICENSE file for details.