CSV to Framer Table

About

This component converts CSV (Comma-Separated Values) data into a customizable table. It fetches a CSV file, parses its content, and displays it as a styled table with configurable appearance and layout options.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

1. Paste the CSV_to_Table component into your Framer project & add the CSV

2. In the property controls, locate the "Layout" section and find the "Column Widths" array. The "Column Widths" array allows you to specify the width of each column individually:

   • Each entry in the array corresponds to a column, from left to right.

   • Values are in pixels, with a minimum of 50px and a maximum of 2000px.

3. To set column widths:

   • Add an entry for each column you want to explicitly size.

   • For example, [100, 150, 200] sets the first column to 100px, the second to 150px, and the third to 200px.

4. If you have fewer entries in the array than columns in your CSV:

   • The component will use the last specified width for all remaining columns.

   • For example, if your array is [100, 150] and you have 5 columns, columns 3-5 will all be 150px wide

How It Works

You can then customize its appearance and behavior using the property controls, which include options for CSV file selection, delimiter, column width, colors, layout, typography, and alignment settings.

Support

For any queries and help setting up the component, contact hello@segmentui.com

Refund Policy

If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.