Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Shmew/Feliz.MaterialUI.MaterialTable

Fable bindings written in the Feliz-style for material-table.
https://github.com/Shmew/Feliz.MaterialUI.MaterialTable

fable feliz material-table material-ui react table

Last synced: 2 months ago
JSON representation

Fable bindings written in the Feliz-style for material-table.

Lists

README

        

# Feliz.MaterialUI.MaterialTable [![Nuget](https://img.shields.io/nuget/v/Feliz.MaterialUI.MaterialTable.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Feliz.MaterialUI.MaterialTable)

Fable bindings for [material-table](https://github.com/mbrn/material-table) with [Feliz](https://github.com/Zaid-Ajaj/Feliz) style api for use within MaterialUI.

Here is a quick look:

```fs
open Feliz
open Feliz.MaterialUI
open Feliz.MaterialUI.MaterialTable

type private RowData =
{ name: string
surname: string
birthYear: int
birthCity: int }

let render = React.functionComponent (fun () ->
Mui.materialTable [
materialTable.title "My Title"
materialTable.columns [
columns.column [
column.title "Name"
column.field (fun rd -> nameof rd.name)
]
columns.column [
column.title "Surname"
column.field (fun rd -> nameof rd.surname)
]
columns.column [
column.title "Birth Year"
column.field (fun rd -> nameof rd.birthYear)
column.type'.numeric
]
columns.column [
column.title "Birth Place"
column.field (fun rd -> nameof rd.birthCity)
column.lookup [
(34, "İstanbul")
(63, "Şanlıurfa")
]
]
]
materialTable.data [
{ name = "Mehmet"
surname = "Baran"
birthYear = 1987
birthCity = 63 }
{ name = "Zerya Betül"
surname = "Baran"
birthYear = 2017
birthCity = 34 }
]
])
```

Find documentation [here](https://shmew.github.io/Feliz.MaterialUI.MaterialTable/) with live examples.