Building Responsive Tables with Semantic UI React Table

Semantic UI React provides a powerful toolset for creating flexible and responsive tables. This blog post will delve into the depths of the Semantic UI React table, focusing on its features and capabilities and how it can be used to display complex structured data.

Semantic UI React table is a particular faster form of table rendering that allows developers to create tables that can resize table cells based on the content evenly. It is a part of the Semantic UI library, a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react'
import { Table } from 'semantic-ui-react'

const DataTable = () => (
  <Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Student Name</Table.HeaderCell>
        <Table.HeaderCell>age</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>John Doe</Table.Cell>
        <Table.Cell>18</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
)

export default DataTable

The Semantic UI React table is designed to handle complex structured data. It provides a way to structure your data in a way that is both visually appealing and easy to understand. This is particularly useful when displaying complex structured data that would be difficult to understand in other formats.

Key Features of Semantic UI React Table

Responsive Design

One of the critical features of the Semantic UI React table is its ability to stack table content responsively. This means that the table content will adjust based on the size of the user's screen. This is particularly useful when users access content on various devices, from desktop computers to mobile phones.

The Semantic UI React table also provides a way to control the column count. This allows developers to specify the number of columns in the table, ensuring that the table takes up only as much space as necessary.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react'
import { Table } from 'semantic-ui-react'

const DataTable = () => (
  <Table celled unstackable>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Product Name</Table.HeaderCell>
        <Table.HeaderCell>Qty</Table.HeaderCell>
        <Table.HeaderCell>Price</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>Notebook</Table.Cell>
        <Table.Cell>1</Table.Cell>
        <Table.Cell>60</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
)

export default DataTable

Customizable Appearance

The appearance of the Semantic UI React table can be customized in a variety of ways. For example, developers can control the table's colors, allowing them to increase contrast and improve readability. This can be done by applying a darker color to the table header and alternate rows, known as stripe alternate rows.

In addition, the Semantic UI React table allows for text alignment within individual cells. This means that the cell contents can be aligned to the left, right, or center, depending on the needs of the data being displayed.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react'
import { Table } from 'semantic-ui-react'

const DataTable = () => (
  <Table celled striped>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell textAlign='center'>Product Name</Table.HeaderCell>
        <Table.HeaderCell textAlign='right'>Qty</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>Notebook</Table.Cell>
        <Table.Cell>1</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
)

export default DataTable

Enhanced Readability

The Semantic UI React table provides several features that enhance the readability of the data. For example, it allows developers to increase contrast between rows by using a darker color for alternate rows. This feature, known as stripe alternate rows, can make it easier for users to distinguish between different rows of data.

In addition, the Semantic UI React table allows developers to increase readability by adjusting the size of the table cells. This can be done by using the 'resize table cells based on content' feature, which adjusts the size of the cells based on the content they contain.

Efficient Data Handling

The Semantic UI React table is designed to handle large amounts of data efficiently. It does this by rendering only as much data as necessary, ensuring the user's browser is not overwhelmed with too much data. This feature is particularly useful when dealing with large datasets, as it allows the table to display more rows while keeping the number of rows visible to the user manageable.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react'
import { Table } from 'semantic-ui-react'

const DataTable = ({ data }) => (
  <Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Product Name</Table.HeaderCell>
        <Table.HeaderCell>Qty</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      {data.slice(0, 10).map((item, index) => (
        <Table.Row key={index}>
          <Table.Cell>{item.field1}</Table.Cell>
          <Table.Cell>{item.field2}</Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
)

export default DataTable

In the above code snippet, we're only rendering the first 10 items of the data array. This ensures that the browser is manageable if the data array is very large. It also keeps the number of rows visible to the user manageable.

Conclusion

The Semantic UI React table is a powerful tool for developers who need to display complex structured data. With its responsive design, customizable appearance, enhanced readability, and efficient data handling, it provides a robust and flexible solution for any data display needs.

The Semantic UI React table is a tool that can help you create beautiful, responsive, and user-friendly tables. So why wait? Start exploring the power of the Semantic UI React table today!