Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

DetailsList

Description#

The DetailsList component is used to create small list out of a single object.

Import#

it can be imported from the core.

Code Example

import { DetailsList } from "@codecraftkit/core";

or alone.

Code Example

import DetailsList from "@codecraftkit/details-list";

Usage#

It receive a single object, along with the fields you want to show of it

Code Example

function MyApp() {
  const fields = [
    'nombre',
    'apellido',
    'cedula'
  ]


  const item = {
    nombre: 'Pedro',
    apellido: 'Liberato',
    cedula: 123456789
  }


  return <DetailsList fields={fields} item={item}>
      Some interesting Text
    </DetailsList>
}

Fields#

You can customize the kinds of values that are shown in the right sid

Code Example

function MyApp() {
  const CodeComponent = (row) => <Code>{row.name}</Code>


  const fields = [
    'name',
    {field: 'family.father', label: 'Father'},
    {field: 'color', label: 'colorLabel', type: 'colorLabel'},
    {field: 'img', label: 'avatar', type: 'avatar'},
    {field: 'active', label: 'icon-true/false', type: 'icon-true/false'},
    {field: 'date', label: 'date', type: 'date'},
    {label: 'Component', type: 'component',component: CodeComponent}
  ]


  const item = {
    _id: '1',
    name: 'Pedro',
    family:{
    father:'Jose'
    },
    color: '#4392f1',
    img:"img1.jpeg",
    active:false,
    date:new Date()
  }


  return <DetailsList fields={fields} item={item} />
}

onClick#

We can add and onClick function to the items shown in the list

This function receive and object with the field, the value and the item

Code Example

function MyApp() {
  const fields = [
    'nombre',
    'apellido',
    'cedula'
  ]


  const item = {
    nombre: 'Pedro',
    apellido: 'Liberato',
    cedula: 123456789
  }


  const onClick = ({field, value, item}) => {
     alert(field + ': ' + value)
  }


  return <DetailsList
    fields={fields}
    item={item}
    onClick={onClick}
  />
}

Style#

You can remove the list border and add hover to each item

Code Example

function MyApp() {
  const fields = [
    'nombre',
    'apellido',
    'cedula'
  ]


  const item = {
    nombre: 'Pedro',
    apellido: 'Liberato',
    cedula: 123456789
  }


  return <DetailsList
    fields={fields}
    item={item}
    noBorder
    hovered
  />
}

Props#

name

type

required

default

description

item

object

yes

A single object with the fields you want to show

fields

array<object>

yes

array of objects which will form the rows of the List

onClick

Function ({field, value, item}) => <void>

no

Function that handles each item click

boldLabel

Boolean

no

false

Add font Weight bold to the items label

noBorder

Boolean

no

false

Remove the Table Border

hovered

Boolean

no

false

Add a hover animation

...rest

chakra style props

no

Add custom styles to the list container