I'm displaying a Matrix in a Safecracker form. Is there a way to customize the way it is outputted? For example, it seems that I need to have include_jquery="yes" and safecracker_head="yes" in order to make it work. This mucks up the markup as it injects JS in the middle of my page. For the JS, I'd like to have it as an external file so that it can be cached.

The styling of the table also clashes with my design. And a big problem is that the matrix table is not responsive. I'd like to set my own classes (I'm using Twitter Bootstrap) to make it responsive.

I'm happy to do the markup myself. I just need to somehow let Safecracker/Matrix know that the table I create is for a particular matrix field. I'd also need to support those Matrix options like "Delete row".

Is this possible?

2 Answers 2


This question was already asked several times, I found this tutorial http://themetaq.com/articles/bring-matrix-data-editing-to-the-front-end pretty good. I'm doing this same action right now and I disabled jquery and head on safecracker for better optimization.

Just a tip: when you disable safecracker_head you also disable all assets on other fields, when using predefined dropdown in matrix, there is hardcoded function with all the data that is used for creating new rows, so be sure to enable safecracker_head > copy that inline js data to your file > disable safecracker_head


  • Just saw that Cot Bgsu posted the same link to tutorial.
    – Davor Peic
    Jul 1, 2013 at 18:08
  • Have you been successful at this? Jul 1, 2013 at 21:52
  • Yes, it is working fine, use Console to debug any js errors. Did you stuck in some part? What kind of field are you using in Matrix? Simple text inputs?
    – Davor Peic
    Jul 1, 2013 at 22:04
  • I haven't started on this. My Matrix contains: P&T Dropdown and Number mostly. I just wanted to make sure that it is possible before I embark on this journey. Were you also able to implement the "create the first one" link, "add row" button, "add row above", "add row below", etc.? Jul 1, 2013 at 22:20
  • Can you post a screen shot of your new UI? Jul 1, 2013 at 22:22

Here's what you'll need to do:

  1. Use an inspector to look at the code your browser outputs for the matrix table when you use the simple {field:my_matrix_field}. You'll notice each table cell has a unique name.

  2. Format your output to your liking. For each input field, you'll use the name provided by the browser for the corresponding cell. The name should look something like: my_matrix_field[row_id_{row_id}][col_id_xx]. You should replace my_matrix_field with the name of your matrix field, and the xx with the column id of that particular cell (this is where your browser code comes in handy). The row id updates automatically.

  3. Here's an example of one of my input fields. It pulls the content already in the field.

<input type="text" name="section_3_timeline[row_id_{row_id}][col_id_42]" value="{date}">

  1. Don't forget to add your matrix field tag pair if you plan to loop, or pull existing content in for display. This will also require a {exp:channel:entries} tag.

  2. Regarding the other functionality (adding/deleting rows), I personally have not had too much luck with that. This article, and the comments at the bottom may be able to help you more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.