billstclair / elm-dynamodb / DynamoDB.Html

Simple rendering for a list of DynamoDB.Types.Item.

renderItemTable : (DynamoDB.Types.Item -> msg) -> List String -> List DynamoDB.Types.Item -> Html msg

Render a table for a list of Items.

Uses "prettytable" as the table's CSS class.

The list of strings is the key names which should appear first in the displayed table.

The wrapper, (Item -> msg), is called when the user clicks on a row.

renderItemTableWithClass : String -> (DynamoDB.Types.Item -> msg) -> List String -> List DynamoDB.Types.Item -> Html msg

Render a table for a list of Items.

The String arg is the CSS class for the table.

The list of strings is the key names which should appear first in the displayed table.

The wrapper, (Item -> msg), is called when the user clicks on a row.


type alias TableConfig element columnDescriptor =
{ columnDescriptors : List columnDescriptor
, columnDescriptorToString : columnDescriptor -> String
, elementToString : columnDescriptor -> element -> Maybe String 
}

Describe a table column for renderTable.

renderTable : (element -> msg) -> TableConfig element columnDescriptor -> List element -> Html msg

Render a table. renderItemTable is implemented with this.

Uses "prettytable" as the table's CSS class.

The wrapper, (element -> msg), is called when the user clicks on a row.

renderTableWithClass : String -> (element -> msg) -> TableConfig element columnDescriptor -> List element -> Html msg

Render a table. renderItemTableWithClass is implemented with this.

The String arg is the CSS class for the table.

The wrapper, (element -> msg), is called when the user clicks on a row.

prettyTableCssClass : Html msg

Defines the prettytable CSS class for table elements.

Putting this anywhere but the <head> of your HTML document isn't supposed to work, but it does in most browsers.

Best practive would be to include the following in your application's CSS, but this works in a pinch.

table.prettytable {
  margin: 0em 0.5em 0.5em 0.5em;
  background: whitesmoke;
  border-collapse: collapse;
}
table.prettytable th, table.prettytable td {
  border: 1px silver solid;
  padding: 0.2em;
}
table.prettytable th {
  background: gainsboro;
  text-align: center;
}
table.prettytable tr:nth-child(even) td {
  background: white;
}
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;