@atlaskit/table v0.4.28

Table

WARNING!

This is an experimental package for exploration and validation of the foundations for the Atlassian Design System.

Description

A table is used to display and organise complex data.

Usage

import Table from '@atlaskit/table';

Detailed docs and example usage can be found here.

Render Prop

import '@atlaskit/css-reset';
import Table, { Row, Cell, TBody, THead, HeadCell } from '@atlaskit/table';

import { presidents } from './data';

type President = (typeof presidents)[number];

/**
 * Primary UI component for user interaction
 */
export const RenderProp = ({ isSelectable }) => {
  return (
    <Table isSelectable={isSelectable}>
      <THead>
        <HeadCell>Name</HeadCell>
        <HeadCell>Party</HeadCell>
        <HeadCell>Year</HeadCell>
      </THead>
      <TBody<President> rows={presidents}>
        {row => (
          <Row key={row.id} {...row}>
            <Cell>{row.nm}</Cell>
            <Cell>{row.pp}</Cell>
            <Cell>{row.tm}</Cell>
          </Row>
        )}
      </TBody>
    </Table>
  );
};

Composition

import '@atlaskit/css-reset';
import Table, { Row, Cell, TBody, THead, HeadCell } from '@atlaskit/table';

import { presidents } from './data';

/**
 * Primary UI component for user interaction
 */
export const CompositionExample = ({ isSelectable }) => {
  return (
    <Table isSelectable={isSelectable}>
      <THead>
        <HeadCell>Name</HeadCell>
        <HeadCell>Party</HeadCell>
        <HeadCell>Year</HeadCell>
      </THead>
      <TBody>
        {presidents.map(row => (
          <Row key={row.id}>
            <Cell>{row.nm}</Cell>
            <Cell>{row.pp}</Cell>
            <Cell>{row.tm}</Cell>
          </Row>
        ))}
      </TBody>
    </Table>
  );
};