JSPM

1. Import the component:

import { AnnotatedTableComponent } from 'annotatable-table-component';

// Use the component
const MyComponent = () => {
  const data = {
    headers: ["Name", "Age", "City"],
    rows: [
      ["Alice", 30, "New York"],
      ["Bob", 25, "San Francisco"]
    ]
  };

  return ;
};

Props

• data: Object containing headers (string[]) and rows (Array<string | number>[])

This component uses Tailwind CSS for styling. Ensure your project is set up with Tailwind CSS:

1. Install Tailwind CSS:

   npm install tailwindcss postcss autoprefixer
   npx tailwindcss init

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Your app's components
    "./node_modules/annotatable-table-component/**/*.{js,jsx,ts,tsx}", // This component
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};