Changed table example layout

Author: rufataliy

example/src/tables/WithIcons.tsx

@@ -29,8 +29,28 @@ const options: Options<City> = {
 export const WithIcons = () => {
   return (
     <>
-      <WithIconsCode />
-      <Table data={cities} options={options} />
+      <div className='w-100'>
+        <h3 className='light'>With icons</h3>
+        <p className='dark'>
+          Based on some custom logic you can render different data or icons in
+          the table. In the example below the model looks like this:
+          <pre>
+            <code>
+              {`
+              {
+                name: "Vancouver";
+                weather: "cloudy";
+                temperature: "21";
+                km: "3020";
+              }
+            `}
+            </code>
+          </pre>
+          Based on weather value different icons rendered instead.
+        </p>
+        <WithIconsCode />
+        <Table data={cities} options={options} />
+      </div>
     </>
   )
 }

example/src/tables/WithLink.tsx

@@ -5,7 +5,7 @@ import { Employee } from '../models'
 import { WithLinkCode } from './codeSamples'
 
 const wrapToLink = (value: any, entry: Employee) => {
-  return <a href={`somelink/${entry}`}>{value}</a>
+  return <a href={`#link/${entry.uuid}`}>{value}</a>
 }
 
 const options: Options<Employee> = {
@@ -19,8 +19,21 @@ const options: Options<Employee> = {
 export const WithLink = () => {
   return (
     <>
-      <WithLinkCode />
-      <Table data={employees} options={options} />
+      <div className='w-100'>
+        <h3 className='light'>With links</h3>
+        <p className='default'>
+          You can wrap your data around links. Create a function that accepts
+          value of the property that mentioned in your options.
+          <pre>
+            <code>{` {... name:{displayName: "First name"}}`}</code>
+          </pre>
+          . The value of name property will be passed to your function.
+          Optionally the entry object will also be passed to the function. See
+          below for an example.
+        </p>
+        <WithLinkCode />
+        <Table data={employees} options={options} />
+      </div>
     </>
   )
 }

example/src/tables/WithSelects.tsx

@@ -48,14 +48,20 @@ export const WithSelects = () => {
     return `checks: ${JSON.stringify(checks)}`
   }
   return (
-    <>
+    <div className='w-100'>
+      <h3 className='light'>With checkboxes</h3>
+      <p className='dark'>
+        You can create a wrapper function that is kooks to your component state
+        and pass it down to the table. It wll allow you render fomr elements and
+        keep track of their state in you component. See the example below
+      </p>
       <WithSelectCode />
       <div className='highlight-wrapper'>
         <Highlighter language='javascript' style={atomOneDark}>
           {convertStatetoString()}
         </Highlighter>
       </div>
       <Table data={employees} options={options} />
-    </>
+    </div>
   )
 }

example/src/tables/codeSamples/WithLinkCode.tsx

@@ -13,7 +13,7 @@ export const WithLinkCode = () => {
   import { Employee } from '../models'
 
   const wrapToLink = (value: any, entry: Employee) => {
-    return <a href={\`somelink/\${entry}\`}>{value}</a>
+    return <a href={\`somelink/\${entry.uuid}\`}>{value}</a>
   }
 
   const options: Options<Employee> = {