ReactJS Semantic UI Table Collections

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

In this article we will know how to use table collections in ReactJS Semantic UI.

Table is used to make a table containing some information.

Types:

• definition: Table can be formatted to emphasize a first column that defines a row content.
• structured: Table can be formatted to display complex data in a structure format.

States:

• positive / negative: Using this state will let the user to know that the cell or row value is good or bad.
• error: Cell or row value that can have an error can be easily detected or seen by the user using this state.
• warning: This state will let the user know whether any cell or row is showing any warning.
• active: This state will make the row active that is currently selected by the user.
• disabled: This state is used to make any cell or row in a table to be disabled.

Syntax:

<Table>
  <Table.Header>
    <Table.Row>
      content
    </Table.Row>
  </Table.Header>
  
  <Table.Body>
    <Table.Row>
      content
    </Table.Row>
  </Table.Body>  
</Table>

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command.

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command.

  cd foldername

• Step 3: Install semantic UI in your given directory.

   npm install semantic-ui-react semantic-ui-css

Project Structure: It will look like the following.

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Example 1: In this example we will be going to use table, header and rating elements to display basic table by using ReactJS Semantic UI Table collections.

App.js

import React from 'react'
import { Header, Table, Rating } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const btt = () => (
    <Table celled padded>
        <Table.Header>
            <Table.Row>
                <Table.HeaderCell textAlign='center'>
                 S no.
                </Table.HeaderCell>
                <Table.HeaderCell textAlign='center'>
                 GeeksforGeeks
                </Table.HeaderCell>
                <Table.HeaderCell textAlign='center'>
                 Rating
                </Table.HeaderCell>
            </Table.Row>
        </Table.Header>

        <Table.Body>
            <Table.Row>
            <Table.Cell>
            <Header as='h2' textAlign='center'>
            1
            </Header>
                </Table.Cell>
                <Table.Cell singleLine textAlign='center'>
                  gfg1
                </Table.Cell>
                <Table.Cell>
                <Rating icon='star' defaultRating={5} maxRating={5}/>
                </Table.Cell>
            </Table.Row>
            <Table.Row>
            <Table.Cell>
            <Header as='h2' textAlign='center'>
            2
            </Header>
                </Table.Cell>
                <Table.Cell singleLine textAlign='center'>gfg2
                </Table.Cell>
                <Table.Cell>
                <Rating icon='star' defaultRating={5} maxRating={5} />
                </Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table>
)

export default btt

Output: 

Example 2: In this example we will be going to use table, header and rating elements to display table with error state by using ReactJS Semantic UI Table collections.

App.js

import React from 'react'
import { Header, Table, Rating } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const btt = () => (
    <Table celled padded>
        <Table.Header>
            <Table.Row>
                <Table.HeaderCell textAlign='center'>S no.
                </Table.HeaderCell>
                <Table.HeaderCell textAlign='center'>
                  GeeksforGeeks
                </Table.HeaderCell>
                <Table.HeaderCell textAlign='center'>Rating
                </Table.HeaderCell>
            </Table.Row>
        </Table.Header>

        <Table.Body>
            <Table.Row>
            <Table.Cell>
            <Header as='h2' textAlign='center'>
            1
            </Header>
                </Table.Cell>
                <Table.Cell singleLine textAlign='center'>gfg1
                </Table.Cell>
                <Table.Cell>
                <Rating icon='star' defaultRating={5} maxRating={5}/>
                </Table.Cell>
            </Table.Row>
            <Table.Row>
            <Table.Cell>
            <Header as='h2' textAlign='center'>
            2
            </Header>
                </Table.Cell>
                <Table.Cell singleLine textAlign='center'>gfg2
                </Table.Cell>
                <Table.Cell>
                <Rating icon='star' defaultRating={5} maxRating={5} />
                </Table.Cell>
            </Table.Row>
        </Table.Body>
        <Table.Body>
            <Table.Row error>
            <Table.Cell>
            <Header as='h2' textAlign='center'>
            3
            </Header>
                </Table.Cell>
                <Table.Cell singleLine textAlign='center'>gfg3
                </Table.Cell>
                <Table.Cell>
                <Rating icon='star' defaultRating={5} maxRating={5}/>
                </Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table>

)

export default btt

Output:

Reference: https://react.semantic-ui.com/collections/table