Prompt Title: filter

To achieve this, you can pass a filter prop from Main to TableList, which will be used to filter the tables based on the selected module. Here's how you can modify the components:

1. Update the Header component to pass the selected module to the Main component:

jsxCopy code
// Header.js
const Header = ({ displayCode, toggleDisplayCode, setShowDiagram, setSelectedModule }) => {
  // ...

  return (
    // ...
    <button type="button" class="btn btn-outline-dark" onClick={() => { setShowDiagram('techmap'); setSelectedModule('techmap'); }}>Techmap</button>
    <button type="button" class="btn btn-outline-dark" onClick={() => { setShowDiagram('passport'); setSelectedModule('passport'); }}>Passport</button>
    <button type="button" class="btn btn-outline-dark" onClick={() => { setShowDiagram('nomenclature'); setSelectedModule('nomenclature'); }}>Nomenclature</button>
    // ...
  );
};

2. In the Main component, create a new state for the selected module and pass it to the Header and TableList components:

jsxCopy code
// Main.js
const Main = () => {
  // ...

  const [selectedModule, setSelectedModule] = useState('techmap');

  return (
    <div>
      <Header
        displayCode={displayCode}
        toggleDisplayCode={toggleDisplayCode}
        setShowDiagram={setShowDiagram}
        setSelectedModule={setSelectedModule}
      />

      <div className="container-fluid">
        <div className="row">
          <nav
            id="sidebarMenu"
            className="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
          >
            <div className="position-sticky pt-3">
              <ul class="nav flex-column mb-2">
                <TableList onTableSelected={setSelectedTableData} filter={selectedModule} />
              </ul>
            </div>
          </nav>
          <main className="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div>{displayDiagram()}</div>
          </main>
        </div>
      </div>
    </div>
  );
};

3. Update the TableList component to filter the tables based on the filter prop:

jsxCopy code
// TableList.js
import React from 'react';

const TableList = ({ onTableSelected, filter }) => {
  const tables = data.tables;

  const components = tables
    .filter((el) => el.module === filter)
    .map((el) => (
      <li key={el.id}>
        <button type="button" class="btn btn-sm" onClick={() => onTableSelected(el)}>
          {el.name} ({el.module})
        </button>
      </li>
    ));

  return <div>{components}</div>;
};

export default TableList;

Now, when you click on a button in the Header, it will update the selectedModule state, and the TableList component will only display the items with the same module value as the selected button.