Table Component

The Table component is a React component that provides a sortable table structure. It includes components for the table head, table head column, table body, table row, and table column.

Installation

To use the Table component, you need to have the @bolttech/atoms-icon package installed:

npm install @bolttech/frontend-foundations @bolttech/molecules-table

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-table

Usage

You can use the Table component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import { Table } from '@bolttech/molecules-table';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // Adjust the path to your component

function App() {
  const handleSort = (sortList) => {
    console.log('Sort List:', sortList);
    // Perform sorting logic here
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      {/* Table component */}
      <Table onSort={handleSort} dataTestId="example">
        <TableHead>
          <TableHeadColumn sortable={true}>Column 1</TableHeadColumn>
          <TableHeadColumn sortable={true}>Column 2</TableHeadColumn>
          <TableHeadColumn>Column 3</TableHeadColumn>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableColumn>Data 1</TableColumn>
            <TableColumn>Data 2</TableColumn>
            <TableColumn>Data 3</TableColumn>
          </TableRow>
          {/* Add more rows as needed */}
        </TableBody>
      </Table>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Table component accepts the following props: | Prop | Type | Description | | ------------ | ---------- | ----------------------------------------- | | dataTestId | string | The data-testid attribute for testing. | | onSort | function | The function to be called when sorting. | | allowMultipleSort | boolean| Represent if the table should allow sorting by multiple columns | | children | ReactNode| The child components of the table. |

Each TableHeadColumn component also accepts the following prop:

| Prop | Type | Description | | ---------- | --------- | -------------------------------------------- | | sortable | boolean | Determines if the column is sortable or not. |

Functionality

The Table component provides the following functionality:

• Table Structure: Renders a table structure with table head, table head columns, table body, table rows, and table columns.
• Sorting: Allows users to sort columns in ascending, descending, or unsorted order.
• Customizable Content: Allows you to customize the column headers and table data.

Contribution

Contributions to the Table component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.