Building a Google Sheets–Like Table Component

Why FlexiSheet?

FlexiSheet is a powerful, open-source table component for React applications. It offers advanced features like grouping rows, showing totals, validating cells in real-time, dynamically enabling/disabling rows and columns, and supporting an intuitive, spreadsheet-like editing experience.

Key Features:

• Editable cells with validation using Zod schema
• Row and column disabling for editing
• Grouping rows by header key
• Footer rows and custom footers
• Column resizing
• Conditional formatting (TBD)

Example Usage:

import { useState } from 'react';
import { SheetTable } from 'flexisheet';

const columns = [
  {
    accessorKey: 'materialName',
    header: 'Material Name',
    validationSchema: materialNameSchema,
  },
  {
    accessorKey: 'quantity',
    header: 'Quantity',
    validationSchema: quantitySchema,
  },
  {
    accessorKey: 'cost',
    header: 'Cost',
    validationSchema: costSchema,
  },
];

const initialData = [
  {
    headerKey: 'Expenses',
    materialName: 'Wood',
    quantity: 5,
    cost: 100,
  },
  {
    headerKey: 'Expenses',
    materialName: 'Paint',
    quantity: 3,
    cost: 50,
  },
];

const handleEdit = (rowIndex, columnId, value) => {
  // Update state if validation passes
  const newData = [...data];
  newData[rowIndex][columnId] = value;
  setData(newData);
};

const App = () => {
  const [data, setData] = useState(initialData);

  return (
    <SheetTable
      columns={columns}
      data={data}
      onEdit={handleEdit}
      disabledColumns={{ materialName: true }}
      showHeader
    />
  );
};

Want to Learn More?

I’ve created a detailed README.md with full installation instructions and additional examples. I’m also open to feature requests – if there’s something you’d like to see added (conditional formatting, advanced filtering, etc.), please let me know!

Conclusion:
FlexiSheet is a powerful, open-source table component for React applications. With its advanced features and flexible configuration options, it’s perfect for building complex, spreadsheet-like tables in your React app.

FAQs:

Q: What is FlexiSheet?
A: FlexiSheet is a powerful, open-source table component for React applications.

Q: What features does FlexiSheet offer?
A: FlexiSheet offers advanced features like grouping rows, showing totals, validating cells in real-time, dynamically enabling/disabling rows and columns, and supporting an intuitive, spreadsheet-like editing experience.

Q: How do I use FlexiSheet?
A: You can use FlexiSheet by installing it via npm and importing it in your React component. You can then configure it with your data and options.

Q: Is FlexiSheet free?
A: Yes, FlexiSheet is open-source and free to use.