Adding React Table about fable-react HOT 4 CLOSED

I can see two things here: first, according to the ReacTable docs you need a default import. See #60 (comment)

Second, IProp and friends are only used for builtin React elements: basically those representing HTML tags (div, input, etc). Other components define their own props, so you need to check the documentation and pass the props as a plain JS object. You can check here the different options to define JS objects in Fable.

I haven't tested it, but you should be able to initiate a ReactTable component with code similar to the following (from the ReactTable example):

open Fable.Core
open Fable.Core.JsInterop

// Helpers for dynamic typing
let inline (~%) x = createObj x
let inline (=>) k v = k ==> v

type [<Pojo>] Person =
    { name: string; age: int; friend: Person option }

let data =
    [| { name = "Tanner Linsley"
         age = 26
         friend = Some { name = "Jason Maurer"
                         age = 23
                         friend = None } } |]
let columns =
    [| %["Header" => "Name"
         "accessor" => "name"]
       %["Header" => "Age"
         "accessor" => "age"
         "Cell" => fun props -> span [Class "number"] [str !!props?value]]
       // Define other columns in a similar way
    |]

ofImport "default" "react-table" %["data"=>data; "columns"=>columns] []

from fable-react.

from fable-react.

@alfonsogarciacaro you're are a genius. Wow. Thank you so much, I've spend many hours today and you just solved the issue within a couple of minutes, amazing!

In short: Your example works instantly if a single change is applied, replace Class with ClassName.

PS: Yeah I finally can go on! 😄

from fable-react.

I'm no genius, I just happen to be the one who wrote the bindings ;) If anything, it means the API is not intuitive enough and we lack documentation. I'm a bit busy now with Fable 2, if you could write a post about importing external React elements with your experience it'd be great!

from fable-react.