UnpopularTable Documentation

The UnpopularTable component provides a flexible and responsive table with various customization options. Below are examples of how to use the component in different scenarios.

Props

The UnpopularTable component has the following props:

Basic Usage

1. Basic Table

To create a basic table, you need to provide the columns and data props. The columns prop is an array of objects, each containing a header and an accessor. The data prop is an array of objects where each object represents a row in the table.

const columns = [
  { header: "Name", accessor: "name" },
  { header: "Age", accessor: "age" },
  { header: "Email", accessor: "email" },
];

const data = [
  { name: "John Doe", age: 28, email: "john.doe@example.com" },
  { name: "Jane Smith", age: 34, email: "jane.smith@example.com" },
  { name: "Sam Johnson", age: 23, email: "sam.johnson@example.com" },
];

// Usage
<UnpopularTable columns={columns} data={data} />

2. Striped Table

You can create a striped table by setting the striped prop to true. This will alternate the background color of the rows for better readability.

<UnpopularTable columns={columns} data={data} striped />

3. Bordered Table

To add borders to your table, use the bordered prop.

<UnpopularTable columns={columns} data={data} bordered />

4. Hoverable Table

To highlight rows when hovered over, set the hover prop to true.

<UnpopularTable columns={columns} data={data} hover />

5. Responsive Table

For a responsive table that scrolls horizontally on smaller screens, use the responsive prop.

<UnpopularTable columns={columns} data={data} responsive />

6. Custom Styles

You can apply custom styles to the table, headers, and rows by using the tableStyle, headerStyle, and rowStyle props.

const tableStyle = {
  backgroundColor: '#fff',
  color: '#333',
};

const headerStyle = {
  backgroundColor: '#007bff',
  color: '#fff',
};

const rowStyle = {
  backgroundColor: '#f9f9f9',
};

// Usage
<UnpopularTable
  columns={columns}
  data={data}
  tableStyle={tableStyle}
  headerStyle={headerStyle}
  rowStyle={rowStyle}
/>

7. Pagination

To add pagination to your table, use the itemsPerPage prop to specify the number of items per page.

<UnpopularTable columns={columns} data={data} itemsPerPage={5} />

8. Combining Props

You can combine multiple props to achieve the desired table appearance.

<UnpopularTable
  columns={columns}
  data={data}
  striped
  bordered
  hover
  responsive
  itemsPerPage={5}
  tableStyle={{ backgroundColor: '#fff', color: '#333' }}
  headerStyle={{ backgroundColor: '#007bff', color: '#fff' }}
  rowStyle={{ backgroundColor: '#f9f9f9' }}
/>

Conclusion

The UnpopularTable component provides a versatile and stylish solution for building responsive tables. Utilize its customization options to enhance user experience with elegant and functional toast messages in your React applications.