August 18, 2023

Custom Styles

Whether it’s a small change or a complete overhaul, you can now customize your TableFlow importer to match your application style

Eric Ciminelli

Key Features

Personalization: You can now personalize your importer modal's appearance to match your brand or your application's theme.

Flexibility: Directly pass in your CSS to either the React or JavaScript SDK to apply your application style.

Consistency: Keep a consistent look and feel throughout your application, making sure the CSV import modal doesn’t seem out of place.

‍

New to TableFlow?

Sign up for TableFlow cloud and check out our getting started guide to start importing CSV and Excel files from your customers.

‍

How to Use Custom Styles

The React and JavaScript SDKs have a new parameter, customStyles. This can be set to an object of key-value pairs with the CSS property names and values.

The full list of available options can be found in the dev docs for either React or JavaScript.

customStyles={{
  "color-primary": "blueviolet",
  "color-border": "midnightblue",
  "color-text": "white",
  "color-background-modal": "black"
}}

After setting the parameter, open your import modal to see the new styles:

What's Next?

We're always looking for ways for TableFlow to make your CSV and Excel imports as seamless as possible. If you have any feedback, suggestions, or if you'd like to contribute to the project, reach out through our GitHub repository or community Slack.

To the top