Demonstrate usage and preview of Looker component


<Looker lookerId="1146" property="copilot.handle" />

loading...
<Looker lookerId="1146" property="challenge.count" />

loading...
<Looker lookerId="1143" property="user.count" />

loading...
<Looker lookerId="1148" property="country.country_name" />

loading...
<Looker lookerId="1148" property="user.count" />

loading...

      Do not show header when headerName not provided, countRows is 'true', and limit of 10 records

      <Looker
        lookerId="1146"
        limit="10"
        countRows="true"
        tableHeight="100px"
        tableWidth="800px"
        table={[
            {
              property: "copilot.handle",
           },
           {
              headerName: "Completed challenges",
              property: "challenge.count"
           }
          ]}
      />
       
loading...

        Table having list without &q;

        <Looker lookerId="1146" tableHeight="200px" tableWidth="500px" table="[{'headerName': 'Copilot','property': 'copilot.handle'},{'headerName': 'Completed challenges','property': 'challenge.count'}]" />
       
loading...

        <Looker lookerId="1146" tableHeight="300px" tableWidth="700px" table="[{&q;headerName&q;: &q;Copilot&q;,&q;property&q;: &q;copilot.handle&q;},{&q;headerName&q;: &q;Completed challenges&q;,&q;property&q;: &q;challenge.count&q;}]" />
       
loading...

      <Looker
        lookerId="1146"
        table={[
            {
              headerName: "Copilot",
              property: "copilot.handle",
              styles: {
                color: "red",
                textAlign: "left"
              }
           },
           {
              headerName: "Completed challenges",
              property: "challenge.count"
           }
          ]}
      />
       
loading...

            <Looker lookerId="1148" table="[{&q;headerName&q;: &q;Country&q;,&q;property&q;: &q;country.country_name&q;,&q;styles&q;: {&q;color&q;: &q;red&q;,&q;textAlign&q;: &q;left&q;}},{&q;headerName&q;: &q;Users Count&q;,&q;property&q;: &q;user.count&q;,&q;styles&q;: {&q;color&q;: &q;green&q;}}]" />
       
loading...
<Looker lookerId="1148" table="" />

loading...

        <Looker
          lookerId="1146"
          render={(data) => {return data[3]["copilot.handle"]}}
        ></Looker>
      
loading...

        <Looker lookerId="1148" render="function(data){return data[0][&q;user.count&q;]}" />
      
loading...
<Looker lookerId="1146sdfsd" property="copilot.handle" />

loading...