---
name: Table List
menu: Components
route: /components/table-list
---

import { Playground, Props } from 'docz'
import { State } from 'react-powerplug'
import { TableList, TableListItem } from './../index.js'

# Table List

## Basic usage

<Playground>
    <State initial={{
      selectedIndex: null,
      listItems: [
        { label: 'Brain Left' },
        { label: 'Brain Right' },
        { label: 'Heart Left' },
        { label: 'Heart Right' }
      ]
    }}>
        {({ state, setState }) => (
            <TableList headerTitle='Example Table List Header'>
                {state.listItems.map( (item, index) => {
                    return (
                        <TableListItem
                            key={`item_${index}`}
                            itemClass={state.selectedIndex === index ? 'selected' : ''}
                            itemIndex={index}
                            onItemClick={() => alert('item clicked')}
                        >
                            <label>{item.label}</label>
                        </TableListItem>
                    )}
                )}
            </TableList>
        )}

    </State>

</Playground>

## API

<Props of={TableList} />