[Feature] Create Reusable Data Table Components

[KhushamBansal]

Current Behavior

Across Meshery UI and other Layer5 projects, mui-datatables is used extensively to render data tables. Many of these tables implement their own custom toolbars that provide functionality such as filtering, sorting etc.

While these implementations are functionally similar, they are often duplicated across projects with slight variations in behavior and appearance.

Desired Behavior

Create a standardized, reusable set of table toolbar components within Sistent that can be imported by Meshery UI and other Layer5 projects.

<container: flex space-between justified>

  <container: flex-start justified>
  - custom operations, specific to the table at-hand (e.g. create user)
  </>

  <container: flex-end justified>
  - custom bulk operations, specific to the table at-hand (e.g. delete)
  - bulk operations (custom to the table at-hand; e.g. delete).
  - search (with indication of what field(s) are being searched).
  - filter (ideally, multi-select).
  - columns (ideally, auto-hiding and auto-displaying based on breakpoint affiliation).
  </>

</>

Implementation

This issue serves as the umbrella (tracking) issue.

---

Contributor Guide

• 🎨 Wireframes and designs for Sistent site in Figma (open invite)