Hi everyone! 👋 I wanted to share a story about my quest to find an open-source table component with Google Sheets–style functionality. My requirements were quite advanced:
<ul>
<li>Grouping rows</li>
<li>Showing totals</li>
<li>Validating cells in real-time (e.g., for financial data)</li>
<li>Dynamically enabling/disabling rows and columns</li>
<li>Supporting an intuitive, spreadsheet-like editing experience</li>
</ul>
After an extensive search, I couldn’t find an existing library or code snippet that perfectly fit my use case. I needed something powerful enough to handle complex financial work in a CMS, yet still easy to customize. So, I decided to build my own component leveraging these tools:
<ul>
<li><a href="https://tanstack.com/table/v8" target="_blank" rel="noopener nofollow">TanStack Table</a> for the core table logic</li>
<li><a href="https://github.com/colinhacks/zod" target="_blank" rel="noopener nofollow">Zod</a> for robust, schema-based validation</li>
<li><a href="https://ui.shadcn.com" target="_blank" rel="noopener nofollow">ShadCN/UI</a> for elegant UI components and styling</li>
</ul>
I’m calling this component FlexiSheet. Here’s an overview of what it offers and how it can help you create spreadsheet-like tables in your React application.
<hr>
<h2>Why FlexiSheet?</h2>
<ol>
<li>
Editable Cells with Validation 
Each cell can be edited directly in the table. If you need validation (e.g., ensuring the value is a non-negative number), you can define a <a href="https://github.com/colinhacks/zod" target="_blank" rel="noopener nofollow">Zod schema</a>. If the new value doesn’t pass validation, FlexiSheet can highlight the cell and prevent submission until it’s valid.
</li>
<li>
Row and Column Disabling 
Certain rows/columns can be disabled for editing. This is perfect for locking down areas meant for static values, or for read-only columns that compute total/aggregated data.
</li>
<li>
Grouping Rows 
By assigning a simple <code>headerKey</code> to each row, the component automatically groups rows by category. This is handy if you have multiple items belonging to the same group, like “Budget Items” or “Expense Items.”
</li>
<li>
Footer Rows and Custom Footers 
You can display a totals row at the bottom of the table and even attach a fully customizable footer element. For example, a row summing up monthly expenses or a quick note on invoice terms.
</li>
<li>
Column Resizing 
Enable column resizing out of the box by toggling a single prop and defining <code>size</code>, <code>minSize</code>, and <code>maxSize</code> in the column definitions.
</li>
</ol>
<hr>
<h2>Example Usage</h2>
Here’s a short example demonstrating how to define your data and columns, including validation with Zod:
<pre><code class="language-tsx">import { z } from &quot;zod&quot;;

// Define Zod schemas
const materialNameSchema = z.string().min(1, &quot;Material name is required&quot;);
const quantitySchema = z.number().nonnegative().optional();
const costSchema = z.number().min(0, &quot;Cost must be &gt;= 0&quot;);

// Define your columns
const columns = [
 {
 accessorKey: &quot;materialName&quot;,
 header: &quot;Material Name&quot;,
 validationSchema: materialNameSchema,
 },
 {
 accessorKey: &quot;quantity&quot;,
 header: &quot;Quantity&quot;,
 validationSchema: quantitySchema,
 },
 {
 accessorKey: &quot;cost&quot;,
 header: &quot;Cost&quot;,
 validationSchema: costSchema,
 },
];

// Your data
const initialData = [
 { headerKey: &quot;Expenses&quot;, materialName: &quot;Wood&quot;, quantity: 5, cost: 100 },
 { headerKey: &quot;Expenses&quot;, materialName: &quot;Paint&quot;, quantity: 3, cost: 50 },
];

// Render the table
function App() {
 const [data, setData] = useState(initialData);

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

 return (
 &lt;SheetTable
 columns={columns}
 data={data}
 onEdit={handleEdit}
 // Example: disable &quot;materialName&quot; column for editing
 disabledColumns={[&quot;materialName&quot;]}
 // Example: group rows by headerKey
 showHeader
 /&gt;
 );
}
</code></pre>
And that’s it! You’ll have a table that behaves like a spreadsheet—rows can be grouped by category (<code>headerKey</code>), columns can be validated (<code>validationSchema</code>), and totals can be displayed in the footer. It’s a flexible foundation for building powerful, spreadsheet-like features in any React app.
<hr>
<h2>Want to Learn More?</h2>
I’ve created a detailed <a href="https://github.com/jacksonkasi1/FlexiSheet/" target="_blank" rel="noopener nofollow">README.md</a> 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!
If you find this project helpful, feel free to star it ⭐on GitHub. I appreciate the support, and it helps me continue adding new features.
Thanks for reading to the end, and happy coding! 😊

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

Discover how to build a customizable, Google Sheets-like table component called FlexiSheet, using TanStack Table for core logic, Zod for validation, and ShadCN/UI for styling. FlexiSheet supports features like editable cells with validation, row and column disabling, grouping rows, displaying footer rows, and column resizing, making it ideal for complex financial workflows in React applications.

Building a Google Sheets–Like Table Component with TanStack Table, Zod, and ShadCN/UI

It would better you add project link and live demo if possible!