• Resolved Daniel Maier

    (@demaier)


    Hello there,

    We have made the integration between ACF and TablePress mentioned on this link. However, is there a way to make this integration import the “Extra CSS Classes” specified on the table?

    Here’s my code:

    
    <?php
    $tables = get_sub_field( 'table' );
    if( $tables ) :
        foreach( $tables as $post ) :
            $table = json_decode( $post -> post_content );
            $table_header = array_shift( $table );
            
            /*
            Using Tablepress with ACF in page templates
            http://ww.wp.xz.cn/support/topic/using-tablepress-with-acf-in-page-templates
            */
            
            // Tablepress plugin query / args
            // Get ACF saved data
            $post_obj = get_sub_field( 'table' );
            
            // Get the post-table pair json data
            $table_json = get_option( 'tablepress_tables' );
            
            // JSON decode to array
            $json_dec = json_decode( $table_json, true );
            
            // Get the pair data
            $post_table = $json_dec['table_post'];
            
            // Flip the key/value of the array
            $flip = array_flip( $post_table );
            
            // Flip the key value pair to get the table ID from the post ID
            $table_id = $flip[$post->ID];
            
            // Table args
            $args = array(
                'id'                => $table_id,
                'use_datatables'    => true,
                'extra_css_classes' => 'table-records'
            ); ?>                                        
            <?php tablepress_print_table( $args ); ?>
        <?php
        endforeach;
        
        // Reset data from post object
        wp_reset_postdata();
    endif; ?>
    

    On the code above you see that we have a custom CSS class in the table args set as “table-records”. Now, instead of having this class hard coded, is it possible to dynamically pull the class specified on the back end of WordPress admin while editing the table?

    https://www.dropbox.com/s/yu37q2m4h9k12vv/Screenshot%202018-01-11%2017.40.48.png?dl=0

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Daniel Maier

    (@demaier)

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Just don’t set the extra_css_classes parameter in your call. The table will then get the “Extra CSS classes” that were added on the “Edit” screen.
    By setting a value, you basically override that.

    Regards,
    Tobias

    Thread Starter Daniel Maier

    (@demaier)

    Well, I feel stupid now. 🙂
    Thank you for letting me know about that Tobias.

    I have another issue now.

    On this page the custom CSS I created is not working because the .column-2 is getting an inline CSS of width: 0 px;

    Here’s the code:

    
    <th class="column-2 sorting" tabindex="0" aria-controls="tablepress-46" rowspan="1" colspan="1" style="width: 0px;" aria-label="Subject: activate to sort column ascending">Subject</th>
    

    The same happens for the other tabs on this page. It is strange that the custom CSS works just fine for the first tab though.

    Any ideas? Thank you so much!

    • This reply was modified 8 years, 5 months ago by Daniel Maier.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    the problem is the tabs. This inline CSS added by the DataTables JS library (which you use for sorting and search, etc.) However, as the tab initially hides the table, the column widths are calculated to 0 by the browser.

    To override this manually, you could use the !important flag in the “Custom CSS”:

    .tablepress-id-123 .column-2 {
      width: 200px !important;
    }

    Regards,
    Tobias

    Thread Starter Daniel Maier

    (@demaier)

    Oh I see that Tobias. However, adding 200px will force that center column to be at 200px right? I would like it to be automatic and fill the remainder of horizontal space.
    I’m not quite sure how to accomplish that yet.
    Any suggestions?
    Thank you for your help!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    yes, most likely. For best chances, you might have to set the widths of all columns with this method.

    Regards,
    Tobias

    Thread Starter Daniel Maier

    (@demaier)

    Got it, that’s what I was afraid of. 🙂

    Thank you for your help.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Advanced Custom Fields (ACF) x TablePress Extra CSS Classes’ is closed to new replies.