json-to-table-mui

A lightweight React component to render JSON data as a responsive Material UI table with built-in pagination, sorting, and search.

✨ Features

• ✅ Automatically generates table from any JSON array
• 🔍 Built-in search filter
• 🔃 Column sorting (ascending/descending)
• 📄 Pagination controls
• 🎨 Uses Material UI v5
• 🧠 TypeScript support included

🚀 Installation

npm install json-to-table-mui

Or with yarn:

yarn add json-to-table-mui

📦 Usage

import React from 'react';
import ReactDOM from 'react-dom/client';
import  JsonToTable from  "json-to-table-mui";

const sampleData = [
  { name: 'Alice', age: 25, country: 'USA' },
  { name: 'Bob', age: 30, country: 'Canada' },
  { name: 'Charlie', age: 22, country: 'UK' },
  { name: 'David', age: 28, country: 'Germany' },
  { name: 'Eva', age: 35, country: 'France' },
  { name: 'Frank', age: 27, country: 'Italy' },
  { name: 'Grace', age: 31, country: 'Spain' },
  { name: 'Helen', age: 26, country: 'Australia' },
];

const App = () => {

  const onRowClicked = (row: any) => {
      console.log("row", row);
  }
  return(<>
  <div style={{ padding: 20 }}>
    <h1>json-to-table-mui Demo</h1>
    <JsonToTable
      data={sampleData}
      headerBgColor="#1976d2"
      headerFontColor="#fff"
      footerBgColor="#eee"
      footerFontColor="#444"
      bodyBgColor="#000"
      bodyFontColor="#fff"
      onFirstValueClick={(row:any) => onRowClicked(row)}
    />
  </div>
  </>
  )
};

export default App;

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

📐 Props

| Prop | Type | Description | | ----------------- | -------- | ------------------------------------------------------- | | data | any[] | Required. Array of JSON objects to display in table | | headerBgColor | string | Header background color (#hex or rgb()) | | headerFontColor | string | Header text color | | footerBgColor | string | Footer background color | | footerFontColor | string | Footer text color | | bodyBgColor | string | Background color used in the table body | | bodyFontColor | string | Font color used in the table body |

🛠 Dev Setup

git clone https://github.com/jfsemideys/json-to-table-mui
cd json-to-table-mui
npm install
npm run dev     # Starts Vite demo in /example
npm run build   # Builds library to /dist

📄 License

MIT

.

👤 Author José Semidey 📧 [email protected] 🌐 LinkedIn

🙌 Contributing

Pull requests and stars are welcome!
Please open an issue first if you want to add a feature or report a bug.