Show specific rows in tablepress collapse mode

  • Resolved dilshad9692

    (@dilshad9692)


    2 years, 6 months ago

    Using the following code to collapse the table when website is visited in mobile.

    [table id=18 responsive=collapse responsive_breakpoint="phone"/]

    So I have 6 columns in my table. For example column1,column2,….column6

    When the table collapses in mobile view, then column1 and column2 are being shown and the rest shows when someone clicks on + sign
    However, is there any way yo show column3 and column6 when collapsed table is viewed in mobile.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    For that, please add this to the “Custom Commands” text field on the table’s “Edit” screen:

    "columnDefs": [ { "className": "all", "targets": [ 2, 5 ] } ]

    This follows the class definitions from https://datatables.net/extensions/responsive/classes

    Regards,
    Tobias

    Thread Starter dilshad9692

    (@dilshad9692)

    Thank you for the help.
    I will surely try it.

    Sorry for the trouble, But I need help with another thing
    I am unable to center align the buttons. 

    	.tablepress.state tbody td.column-6 a {
		background-color: #000000;
		border: 1px #ffffff;
		margin: 0 auto;
		font-family: montserrat;
		color: white;
		border-radius: 5px;
		padding: 8px 15px;
		font-size: 16px;
		vertical-align: middle;
		white-space: nowrap;
	}

    Need to vertically align as well as center the button in the cell.

    https://www.talentindustry.in/jharkhand-job-alerts

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    you will have to apply the centering to the table cells, e.g. by using

    .tablepress-id-18 .column-6 {
    text-align: center;
    vertical-align: middle;
}

    Regards,
    Tobias

    Thread Starter dilshad9692

    (@dilshad9692)

    Thank you.

    Thread Starter dilshad9692

    (@dilshad9692)

    I got into a trouble again.
    Screenshot the red marked area are the buttons which are not centered in the cell.

    Is there a way to align them horizontally also
    The Website

    @media screen and (min-width: 1025px) {

	.dataTables_filter input {
		border-radius: 5px;
		padding: 2px;
		font-size: 12px;
	}

	.dataTables_filter label input {
		width: 200px;
	}

	.dataTables_filter label {
		border-radius: 5px;
		font-size: 12px;
	}

	.dataTables_length label {
		font-size: 12px;
	}

	.dataTables_length label select {
		font-size: 12px;
		padding: 2px;
	}

	.dataTables_info {
		font-size: 12px;
		color: #3aafa9;
	}

	.dataTables_paginate.paging_simple {
		font-size: 12px;
	}

	.tablepress.state thead th {
		font-size: 14px;
		font-family: Poppins;
		text-transform: uppercase;
		background-color: #000000;
		color: #ffffff;
		padding-top: 5px;
		text-align: center;
		vertical-align: middle;
		white-space: wrap;
		padding-bottom: 5px;
	}

	.tablepress.state tbody td.column-1 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 12%;
	}

	.tablepress.state tbody td.column-2 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 23%;
	}

	.tablepress.state tbody td.column-3 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 22%;
	}

	.tablepress.state tbody td.column-4 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 13%;
	}

	.tablepress.state tbody td.column-5 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 10%;
	}

	.tablepress.state tbody td.column-6 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 10%;
	}

	.tablepress.state tbody td.column-7 a {
		text-align: center;
		background-color: #000000;
		border: 1px #ffffff;
		margin: 0 auto;
		font-family: montserrat;
		color: white;
		border-radius: 5px;
		padding: 5px 7px;
		text-decoration: none;
		font-size: 14px;
		vertical-align: middle;
		white-space: nowrap;
	}

}
    • This reply was modified 2 years, 6 months ago by dilshad9692. Reason: Added code
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    the CSS code from above still applies here. You will just have to change the 6 to a 7, as the buttons are in column 7, and you should not put this into the CSS media query as this would then only be applied on screens wider than 1024 pixels.

    Regards,
    Tobias

    Thread Starter dilshad9692

    (@dilshad9692)

    Thank you,

    I shared only one media query. Although, I have made for different sizes. But thanks for the reminder.

    Sorry couldn’t get what do you mean by this

    You will just have to change the 6 to a 7, as the buttons are in column 7,

    The buttons are in column 7

    Sharing the full code

    @media screen and (max-width: 767px) {

	.dataTables_filter input {
		border-radius: 5px;
		padding: 2px;
		font-size: 8px;
	}

	.dataTables_filter label input {
		width: 100px;
	}

	.dataTables_filter label {
		border-radius: 5px;
		font-size: 8px;
	}

	.dataTables_length label {
		font-size: 8px;
	}

	.dataTables_length label select {
		font-size: 8px;
		padding: 2px;
	}

	.dataTables_info {
		font-size: 8px;
		color: #3aafa9;
	}

	.dataTables_paginate.paging_simple {
		font-size: 8px;
	}

	.tablepress.state thead th {
		font-size: 10px;
		font-family: Poppins;
		text-transform: uppercase;
		background-color: #000000;
		color: #ffffff;
		padding-top: 5px;
		text-align: center;
		vertical-align: middle;
		white-space: wrap;
		padding-bottom: 5px;
	}

	.tablepress.state tbody td.column-2,
	.tablepress.state tbody td.column-3,
	.tablepress.state tbody td.column-4 {
		font-family: Poppins;
		font-size: 10px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 26.6%;
	}

	.tablepress.state tbody td.column-7 a {
		background-color: #000000;
		border: 1px #ffffff;
		margin: 0 auto;
		font-family: montserrat;
		color: white;
		border-radius: 5px;
		padding: 5px 7px;
		text-decoration: none;
		font-size: 10px;
		vertical-align: middle;
		text-align: center;
		white-space: nowrap;
		width: 20.2%;
	}

	.tablepress.state .column-1 {
		display: none;
	}

	.tablepress.state .column-5 {
		display: none;
	}

	.tablepress.state .column-6 {
		display: none;
	}

}

@media screen and (min-width: 768px) and (max-width: 1024px) {

	.dataTables_filter input {
		border-radius: 5px;
		padding: 2px;
		font-size: 10px;
	}

	.dataTables_filter label input {
		width: 150px;
	}

	.dataTables_filter label {
		border-radius: 5px;
		font-size: 10px;
	}

	.dataTables_length label {
		font-size: 10px;
	}

	.dataTables_length label select {
		font-size: 10px;
		padding: 2px;
	}

	.dataTables_info {
		font-size: 10px;
		color: #3aafa9;
	}

	.dataTables_paginate.paging_simple {
		font-size: 10px;
	}

	.tablepress.state thead th {
		font-size: 12px;
		font-family: Poppins;
		text-transform: uppercase;
		background-color: #000000;
		color: #ffffff;
		padding-top: 5px;
		text-align: center;
		white-space: wrap;
		vertical-align: middle;
		padding-bottom: 5px;
	}

	.tablepress.state tbody td.column-1,
	.tablepress.state tbody td.column-2,
	.tablepress.state tbody td.column-3,
	.tablepress.state tbody td.column-4 {
		font-family: Poppins;
		font-size: 12px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 21.25%;
	}

	.tablepress.state tbody td.column-7 a {
		background-color: #000000;
		border: 1px #ffffff;
		margin: 0 auto;
		font-family: montserrat;
		color: white;
		border-radius: 5px;
		padding: 5px 7px;
		text-decoration: none;
		font-size: 12px;
		vertical-align: middle;
		text-align: center;
		white-space: nowrap;
		width: 15%;
	}

	.tablepress.state .column-5 {
		display: none;
	}

	.tablepress.state .column-6 {
		display: none;
	}

}

@media screen and (min-width: 1025px) {

	.dataTables_filter input {
		border-radius: 5px;
		padding: 2px;
		font-size: 12px;
	}

	.dataTables_filter label input {
		width: 200px;
	}

	.dataTables_filter label {
		border-radius: 5px;
		font-size: 12px;
	}

	.dataTables_length label {
		font-size: 12px;
	}

	.dataTables_length label select {
		font-size: 12px;
		padding: 2px;
	}

	.dataTables_info {
		font-size: 12px;
		color: #3aafa9;
	}

	.dataTables_paginate.paging_simple {
		font-size: 12px;
	}

	.tablepress.state thead th {
		font-size: 14px;
		font-family: Poppins;
		text-transform: uppercase;
		background-color: #000000;
		color: #ffffff;
		padding-top: 5px;
		text-align: center;
		vertical-align: middle;
		white-space: wrap;
		padding-bottom: 5px;
	}

	.tablepress.state tbody td.column-1 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 12%;
	}

	.tablepress.state tbody td.column-2 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 23%;
	}

	.tablepress.state tbody td.column-3 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 22%;
	}

	.tablepress.state tbody td.column-4 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 13%;
	}

	.tablepress.state tbody td.column-5 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 10%;
	}

	.tablepress.state tbody td.column-6 {
		font-family: Poppins;
		font-size: 14px;
		font-weight: normal;
		color: #000000;
		text-align: center;
		vertical-align: middle;
		word-break: break-word;
		white-space: wrap;
		width: 10%;
	}

	.tablepress.state tbody td.column-7 a {
		text-align: center;
		background-color: #000000;
		border: 1px #ffffff;
		margin: 0 auto;
		font-family: montserrat;
		color: white;
		border-radius: 5px;
		padding: 5px 7px;
		text-decoration: none;
		font-size: 14px;
		vertical-align: middle;
		white-space: nowrap;
	}

}
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    you will need something like

    .tablepress-id-18 .column-7 {
    text-align: center;
    vertical-align: middle;
}

    in your CSS somewhere (for the correct media query).
    Or, you have to remove the a after .tablepress.state tbody td.column-7 so that you actually target the table cell and not just the link/button in it.

    Regards,
    Tobias

    Thread Starter dilshad9692

    (@dilshad9692)

    Thank you. Works like a charm.

    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!

    Thread Starter dilshad9692

    (@dilshad9692)

    Please help me out with one thing.
    Website

    I have added few css and javascript on buttons to when clicked shows a different table.

    But when used in mobile. The size of table is not right.
    when the page opens the block containing the table in 1st SS is already open. Hence the size is perfect.
    However, when button is clicked to close the block and open another block containing another table then the size of table is not right as seen in 2nd Screenshot.

    Please help.

    1st
    2nd

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    this is because the tables are initially hidden. The JavaScript code can then not calculate certain things like column widths properly (because invisible elements don’t have a width).

    You will need to add another JS call to your button clicks, like

    jQuery('#tablepress-123').DataTable().columns.adjust().responsive.recalc();

    See https://datatables.net/reference/api/responsive.recalc() for an explanation.

    Regards,
    Tobias

    Thread Starter dilshad9692

    (@dilshad9692)

    You are marvelous man. Sorry for so many question. I have never done coding in my life and started 3 months back and just by doing what I am doing now I made talentindustry.in

    All thanks to guys like you for support. Will surely donate once I start earning.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    great! Good to hear that this helped!

    Best wishes,
    Tobias

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Show specific rows in tablepress collapse mode’ is closed to new replies.