ResponsiveDataTable bug and readme updates

[dottharun]

Current Behavior

• This minimal example, does'nt render the table and columns prop is ignored.

import { ResponsiveDataTable } from "@layer5/sistent";

function App() {
  const columns = [
    { name: "name", label: "Name" },
    { name: "company", label: "Company" },
    { name: "city", label: "City" },
    { name: "state", label: "State" },
  ];

  const data = [
    ["Joe James", "Test Corp", "Yonkers", "NY"],
    ["John Walsh", "Test Corp", "Hartford", "CT"],
    ["Bob Herm", "Test Corp", "Tampa", "FL"],
    ["James Houston", "Test Corp", "Dallas", "TX"],
  ];

  const colVis = { name: true, company: false, city: true, state: true };

  return (
    <>
      <ResponsiveDataTable
        data={data}
        columns={columns}
        columnVisibility={colVis}
      />
    </>
  );
}

export default App;

• From the implementation tableCols prop seems to be required to render the Table.
• Even with tableCols prop, columnVisibility seems to be ignored.

import { ResponsiveDataTable } from "@layer5/sistent";

function App() {
  const columns = [
    { name: "name", label: "Name" },
    { name: "company", label: "Company" },
    { name: "city", label: "City" },
    { name: "state", label: "State" },
  ];

  const data = [
    ["Joe James", "Test Corp", "Yonkers", "NY"],
    ["John Walsh", "Test Corp", "Hartford", "CT"],
    ["Bob Herm", "Test Corp", "Tampa", "FL"],
    ["James Houston", "Test Corp", "Dallas", "TX"],
  ];

  const colVis = { name: true, company: false, city: true, state: true };

  return (
    <>
      <ResponsiveDataTable
        data={data}
        tableCols={columns}  //should be optional
        columns={columns}
        columnVisibility={colVis}
      />
    </>
  );
}

export default App;

Expected Behavior

• For each of these parameters - columns, tableCols, columnVisibility, Correct the implementation/readme to reflect correct behaviour.

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

---

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Sistent site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

[MrPhenomenal3110]

Hii ! I would like to work on this !