0.8.4 • Published 9 months ago

@atlaskit/table v0.8.4

Weekly downloads
-
License
Apache-2.0
Repository
bitbucket
Last release
9 months ago

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>
	);
};
0.8.4

9 months ago

0.8.3

9 months ago

0.8.1

10 months ago

0.8.2

9 months ago

0.7.2

10 months ago

0.8.0

10 months ago

0.6.7

1 year ago

0.6.6

1 year ago

0.6.9

12 months ago

0.6.8

12 months ago

0.6.10

11 months ago

0.7.1

11 months ago

0.7.0

11 months ago

0.5.2

1 year ago

0.5.1

1 year ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.4

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.5.0

1 year ago

0.4.30

1 year ago

0.4.29

1 year ago

0.4.28

1 year ago

0.4.27

1 year ago

0.4.26

1 year ago

0.4.25

1 year ago

0.4.24

1 year ago

0.4.23

1 year ago

0.4.22

1 year ago

0.4.21

1 year ago

0.4.20

1 year ago

0.4.19

1 year ago

0.4.18

2 years ago

0.4.17

2 years ago

0.4.15

2 years ago

0.4.16

2 years ago

0.4.9

2 years ago

0.4.10

2 years ago

0.4.13

2 years ago

0.4.14

2 years ago

0.4.11

2 years ago

0.4.12

2 years ago

0.4.8

2 years ago

0.4.5

2 years ago

0.4.4

2 years ago

0.4.7

2 years ago

0.4.6

2 years ago

0.4.3

2 years ago

0.3.0

2 years ago

0.4.1

2 years ago

0.3.2

2 years ago

0.4.0

2 years ago

0.3.1

2 years ago

0.3.4

2 years ago

0.4.2

2 years ago

0.3.3

2 years ago

0.2.7

2 years ago

0.2.8

2 years ago

0.2.6

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago