CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

DataTable

Description#

The Data Table is used to create very customizable and easy to use tables.

Import#

it can be imported from the core.

Code Example

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

or alone.

Code Example

import Table from "@codecraftkit/datatable";

Usage#

Dummy Data#

Code Example

const list = [
    {
        _id: '1',
        name: 'userName1',
        lastName: 'userLastName1',
        address: 'Maracaibo',
        age: '26',
        occupation: 'Developer',
        color: 'green'
    },
    {
        _id: '2',
        name: 'userName2',
        lastName: 'userLastName2',
        address: 'Maracaibo',
        age: '29',
        occupation: 'Developer'
    },
    {
        _id: '3',
        name: 'userName3',
        lastName: 'userLastName3',
        address: 'Maracaibo',
        age: '18',
        occupation: 'Designer',
        color: 'blue'
    },
    {
        _id: '4',
        name: 'userName4',
        lastName: 'userLastName4',
        address: 'Maracaibo',
        age: '22',
        occupation: 'Developer'
    },
    {
        _id: '5',
        name: 'userName5',
        lastName: 'userLastName5',
        address: 'Maracaibo',
        age: '33',
        occupation: 'Developer'
    }
];

Head Example#

If the label and the field are the same just pass a string. Example: name

If the label and the field aren't the same pass and object. Example: {field:'lastName', label:'Apellido'}

Code Example

const head = [
      'name',
      {field:'lastName', label:'Apellido'},
      'address',
      {field:'age', label:'Edad'},
      'color',
      'occupation',
  ];

The key label in the head object is always required in their items, at least you are using the quotes method

Simple Example#

Code Example

function MyApp() {
  const head = [
    'name',
    {field:'lastName', label:'Apellido'},
    'address',
    {field:'age', label:'Edad'},
    'color',
    'occupation',
  ];

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

Actions#

Code Example

function MyApp() {
const head = [
  'name',
  {field:'lastName', label:'Apellido'},
  'address',
  {field:'age', label:'Edad'},
  'color',
  'occupation',
];

const actions = [
  {color: 'teal', label: 'Details', icon: <FaEye/>, isLink: {route: 'example-query'}},
  {color: 'blue', label: 'Edit', icon: <FaRegEdit/>, handler: (user)=>alert('edit '+user.name)},
  {color: 'red', label: 'Remove', icon: <MdDelete/>, handler: (user)=>alert('remove ' + user.name)},
]

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

Left Actions#

Code Example

<Table
list={list}
head={head}
leftActions={actions}
actionsTitle="Left Actions"
/>

Action Group#

How to group the actions

It use the same data structure as actions

Code Example

<Table
list={list}
head={head}
actions={actions}
actionGroup
/>

Action With Rows#

Customize the actions according the rows

Code Example

function MyApp() {
  const head = [
    'name',
    {field:'lastName', label:'Apellido'},
    'address',
    {field:'age', label:'Edad'},
    'color',
    'occupation',
  ];

   const actionsWithRow = (row) => [
    {
      color: row.color,
      label: 'Edit',
      icon: <FaRegEdit/>,
      handler: (user)=>alert('edit '+user.name)
    },
    {
      color: 'red',
      label: 'Remove',
      icon:<MdDelete/>,
      handler: (user)=>alert('remove ' + user.name)
    },
  ];

  const leftActionsWithRow = (row) => [
    {
      color: 'teal',
      label: row.name,
      icon: row.age > 25? <FaUser/>: <FaUserTie />,
      isLink: {route: 'example-query'}
    }
  ];

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

A wrapper head above the normal one, the key columns handle the span of each item Note: the number of columns in the subhead has to match with the number of columns in the head, counting their columns spans

Code Example

function MyApp() {
  const subHead = [
    { label:'Name', columns:2 },
    { label:'Location', columns:3 },
    { label:'Work'}
  ]

   const footer = [
    { label:'Total', columns:2 },
    { label:'Location', columns:3 },
  ]

  return <Table
    list={list}
    head={head}
    subHead={subHead}
    footer={footer}
    //headStyles={{bg:'gray.50'}}
    //subHeadStyles={{bg:'gray.50'}}
    //footerStyles={{bg:'gray.50'}}
  />
}

Sort#

The sort will enable to sort the data by every Column

Code Example

function MyApp() {
  const [sortBy, setSortBy] = useState('_id')
  const [orderBy, setOrderBy] = useState('desc')
  return <Table
      list={list}
      head={head}
      sort
      sortBy={sortBy}
      setSortBy={setSortBy}
      orderBy={orderBy}
      setOrderBy={setOrderBy}
  />
}

Collapse#

The Test component will receive the Item of the row as a prop, in this case we received it with the name data

Code Example

function MyApp() {
  const Test = data => {
    return <Grid p={4} bg="gray.100">
      {data.name}
    </Grid>
  };

  const head = [
    'name',
    {field:'lastName', label:'Apellido'},
    'address',
    {field:'age', label:'Edad'},
    'color',
    'occupation',
  ];

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

Selection#

Allow to select rows and get their values, those Values are store in the selected and selectedRows states

Code Example

function MyApp() {
const [selected, setSelected] = useState([])
const [selectedRows, setSelectedRows] = useState([])
return <Table
    list={list}
    head={head}
    selection
    selected={selected}
    setSelected={setSelected}
    selectedRows={selectedRows}
    setSelectedRows={setSelectedRows}
    limit={5}
/>
}

Row Style#

A custom function that returns and object of styles and receive the row and its index

Code Example

<Table
  list={list}
  head={head}
  limit={5}
  rowStyle={(row, index)=>({
    color: row.age > 25? 'blue.500' : undefined,
    bg: index === 3 ?'gray.200': undefined
  })}
/>

it can receive a function that returns and object or a simple object

Last Row Style#

Custom styles for the last row of the table

Code Example

<Table
  list={list}
  head={head}
  limit={5}
  lastRowStyles={{
    bg:'gray.200'
  }}
  // lastRowStyles={(row, index)=>({})}
/>

it can receive a function that returns and object, or a simple object

Row OnClick#

A function called when a row is click

Code Example

function MyApp() {
  const [rowSelected, setRowSelected] = useState({})
  return <Table
    list={list}
    head={head}
    limit={5}
    rowOnClick={(item)=>setRowSelected(item)}
    rowStyle={(row)=>({
      bg: row._id === rowSelected._id? 'gray.200' : undefined,
    })}
  />
}

rowOnClick also receive a second parameter to set the styles of the row clicked

Local Paginate#

Code Example

function MyApp() {
  const [page, setPage] = useState(1);
  const limit = 1

  const onPageChange = (pageSelected) =>
    setPage(pageSelected.selected + 1)

  return <Grid gap={4}>
    <Box justifySelf="end">
      <Paginate
        total={5}
         limit={limit}
         onPageChange={onPageChange}
       />
     </Box>
    <Table
        list={list}
        head={head}
        limit={limit}
        page={page}
        localPaginate
    />
  </Grid>
}

Props#

name

type

required

default

description

list

array<object>array<Strings>

yes

array of objects which will form the values of the Table

head

array<object>

yes

array of objects which will form the head of the Table

subHead

array<object>

Add another head above the normal one, to group the headers

footer

array<object>

Add a head at the bottom of the table

actions

array<object>

array of objects which will form the right actions button of the Table

actionsWithRow

Function (row) => array<actions>

Function that allows to create the actions buttons depending on the row, it must return the new actions array

leftActionsWithRow

Function (row) => array<actions>

Function that allows to create the actions buttons depending on the row in the left side of the table, it must return the new actions array

actionsTitle

String

Actions

The actions head label

leftActions

array<object>

array of objects which will form the left actions button of the Tablen

Boolean

false

Show a loading animation

noDataComponent

Component

No data

Component that will be displayed as loading Screen

Sort

Boolean

false

Enable sort by each Column

sortBy

State

no, unless the prop “sort“ is used

false

Value of the table sort

setSortBy

SetState

no, unless the prop “sort“ is used

false

Set the sort in a state

orderBy

State

no, unless the prop “sort“ is used

false

Value of the table order

setOrderBy

SetSate

no, unless the prop “sort“ is used

Set the order in a state

collapse

Component

Render a component inside a collapse

collapseByField

String

_id || id

Unique item field from where the collapse will work

collapseOpened

Boolean

_false

Keep the collapses opened

localPaginate

Boolean

false

Enable Local Paginate

limit

Number

no, unless the prop “localPaginate“ is used

THe limit of items display in one page

selection

Boolean

false

enable or disable de selection

page

Number

no, unless the prop “localPaginate“ is used

The number of the actual Page, this is used for selection and Local Paginate

selected

State

no, unless the prop “selection“ is used

Array of Ids of the items selected

setSelected

SetState

no, unless the prop “selection“ is used

Set the Ids in a state

selectedRows

State

no, unless the prop “selection“ is used

Array of items of the items selected

setSelectedRows

SetState

no, unless the prop “selection“ is used

Set the items in a state

rowOnClick

Function (item,setStyles) => void>

Function that handles the row click

rowStyle

functionobject

Styles applied to each rows

lastRowStyles

functionobject

Styles applied to the last row of the table

headStyles

object

Custom Styles applied to the Head

subHeadStyles

object

Custom Styles applied to the SubHead

footerStyles

object

Custom Styles applied to the footer

noHead

Boolean

false

Remove the head component

noBorder

Boolean

false

Remove the Table Border

striped

Boolean

false

Add an striped color to odd number rows

stripeColor

String

Depends on chakra color mode

change stripe color

hovered

Boolean

false

Add a hover animation

paginate

Paginate<props>

Props to pass to the paginate component at the bottom of the datatable, pass them to show the paginate

paginateBottom

Boolean

true

Enable to show the paginate

DataTable

Import#

Code Example

Code Example

Usage#

Dummy Data#

Code Example

Head Example#

Code Example

Simple Example#

Code Example

Actions#

Code Example

Left Actions#

Code Example

Action Group#

Code Example

Action With Rows#

Code Example

SubHead and Footer#

Code Example

Sort#

Code Example

Collapse#

Code Example

Selection#

Code Example

Row Style#

Code Example

Last Row Style#

Code Example

Row OnClick#

Code Example

Local Paginate#

Code Example

Props#

name

type

required

default

description