JSPM

@instructure/ui-table

7.3.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1938
  • Score
    100M100P100Q134107F
  • License MIT

A styled HTML table component

Package Exports

  • @instructure/ui-table

Readme


category: packages

ui-table

npm  build-status  MIT License  Code of Conduct

A styled HTML table component.

Components

The ui-table package contains the following:

Installation

yarn add @instructure/ui-table

Usage

---
example: false
---
import React from 'react'
import { Table } from '@instructure/ui-table'

const MyTable = () => {
  return (
    <Table caption='Top rated movies'>
      <Table.Head>
        <Table.Row>
          <Table.ColHeader>Rank</Table.ColHeader>
          <Table.ColHeader>Title</Table.ColHeader>
          <Table.ColHeader>Year</Table.ColHeader>
          <Table.ColHeader>Rating</Table.ColHeader>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>1</Table.RowHeader>
          <Table.Cell>The Shawshank Redemption</Table.Cell>
          <Table.Cell>1994</Table.Cell>
          <Table.Cell>9.3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>2</Table.RowHeader>
          <Table.Cell>The Godfather</Table.Cell>
          <Table.Cell>1972</Table.Cell>
          <Table.Cell>9.2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>3</Table.RowHeader>
          <Table.Cell>The Godfather: Part II</Table.Cell>
          <Table.Cell>1974</Table.Cell>
          <Table.Cell>9.0</Table.Cell>
        </Table.Row>
      </Table.Body>
  </Table>
  )
}