CodeCraft Kit

@codecraftkit

Documentation

Table Types

Description#

The table have multiple types depending on the data you want to show, later you will se every head type and its description but now look at this three example

Dummy data#

Code Example

const list = [
{
  _id: '1',
  name: 'userName1',
  family:{
      father:'Jose'
  },
  array:[10,9,8,7,6,5,4,3,2,1],
  color: '#4392f1',
  img:"img1.jpeg",
  active:false,
  phone:1560561406,
  amount:550,
  date:new Date(),
  linkName:'Paginate',
  link:'/paginate',
  number:123,
},{
  _id: '2',
  name: 'userName2',
  family:{
      father:'Antonio'
  },
  array:[1,2,3,4,5,6,7,8,9,10],
  color:'#dc493a',
  img:'img2.jpeg',
  active:true,
  phone:1560561406,
  amount:720,
  date:new Date(),
  linkName:'Modal',
  link:'/modal',
  number:456,
}];

First Example#

Code Example

function MyApp() {
  const head = [
      {field: 'name', label: 'Name'},
      {field: 'family.father', label: 'Father'},
      {field: 'array', label: 'array', type: 'array',w:'200px'},
      {field: 'color', label: 'color', type: 'color'},
      {field: 'color', label: 'colorLabel', type: 'colorLabel'},
      {field: 'active', label: 'icon-true/false', type: 'icon-true/false', size: '16px'},
      {field: 'phone', label: 'phone', type: 'phone',w:'150px'},
      {field: 'date', label: 'date', type: 'date'},
      {field: 'name', label: 'label+func', type: 'label+func', func: ()=>alert('hola')},
  ];

  return <Table
      list={list}
      head={head}
  />
}

Second Example#

Code Example

function MyApp() {
const head = [
  {field: 'img', label: 'img', type: 'img',size:'sm', w:'50px'},
  {field: 'img', label: 'avatar', type: 'avatar', w:'70px'},
  {field: 'img', label: 'img+label', type: 'img+label', title:'name', w:'150px'},
  {field: 'linkName', label: 'internal-link', type: 'internal-link', link: 'link'},
  {field: 'linkName', label: 'link', type: 'link', link: 'link'},
  {field: 'amount', label: 'currency', type: 'currency'},
  {field: 'number', label: 'Number', type: 'number'}
];

return <Table
    list={list}
    head={head}
/>
}

Component Type#

Code Example

function MyApp() {
  const ItemBadge = (row) => <Box><Badge>{row.name}</Badge></Box>

  const head = [
    {label: 'Component', type: 'component',component: ItemBadge}
  ]

  return <Table
    list={list}
    head={head}
  />
}

Header Types List#

Note: you could add w (width) to any head type to adjust the width of the column

name

description

Requires

Example

number

Allow to show number variables without parse them to String

Number

{field: 'exp', label: 'experience', type: 'number'}

img / avatar

Show an Image with a custom size

size: type String, default:'32px'

{field: 'logo', label: 'logo', type: 'img', size: '32px'}

array

Show an array

array of Strings

{field: 'rolesIds', label: 'roles', type: 'array'}

color

Show just the color in a box

an String with a hexadecimal color

{field: 'color', label: 'color', type: 'color'}

colorLabel

Show a label with the hexadecimal color and add to it that color

an String with a hexadecimal color

{field: 'color', label: 'color', type: 'colorLabel'}

icon-true/false

Show a check icon if the field is true and if the field is false shows and X

boolean value, size: type String default:'32px'

{field: 'active', label: 'active', type: 'icon-true/false', size: '16px'}

phone

Parse the value as a phone number

String

{field: 'myPhone', label: 'Phone', type: 'phone'}

date

To show values in date format

format: type String default: “MM/DD//YY“

{field: 'date', label: 'Date', type: 'date'

label+func

Show a normal field but with a click action

func: Function who will be execute onClick

{field: 'name', label: 'class', type: 'label+func', func: sayHELLO}

img+label

Shows an Image and a text next to it

size: type String, default:'32px', img:image link

{field: 'name', label: 'class', type: 'img+label', img: 'logo'}

internal-link

Use the internal routing system to redirect to other pages

link: Is the link of the new page

{field: 'DashBoard', label: 'link', type: 'internal-link', link: '/dashboard'}

link

Redirect to an external or internal link

link: Is the link of the new page

{field: 'linkName', label: 'link', type: 'link', link: 'link'}

component

Add custom component to the row

Component

{ label: 'Component', type: 'component', component:'ReactComponent'}