Option for hide selection column in ant table

I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

We have interface with one selection in the table, but now we must reproduce select logic for implement selection logic. We can use CSS hacks for antd, but it is not good now we write something like this:

                    className: classnames({
                      [`${tableRowClassName}-selected`]: isProductSelected(productClass),
                    }),

and some handlers for update state (isProductSelected we calculate from state)

I was looking for: #14198 #8766 #8741 but don’t find any solution for this #14198 is most similar for us, but we want to provide select ability all the time, but without checkbox, only by click

What does the proposed API look like?

<Table {...props}
hideSelectionColumn: true
      />

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:12 (5 by maintainers)

Top GitHub Comments

16reactions

almeidapaulooliveiracommented, Jun 30, 2020

Only changing the CSS was broking the Table alignment for me, if you have the same issue, try this:

	const rowSelection = {
                ... // Your own properties and add:
		columnWidth: 0, // Set the width to 0
		renderCell: () => "", // Render nothing inside
	};

and then override the CSS property as suggested above:

.ant-table-selection-column {
	display: none;
}

8reactions

prashanthsakacommented, Oct 29, 2019

Just FYI … if the table has grouping as well … then the custom css should be:

.ant-table-selection-col, .ant-table-selection-column {
  display: none;
}

Top Results From Across the Web

Hide column for table using antd - Stack Overflow

Here is how I did it. The concept is the same, which is to remove (filter out) the column from the array. Add...

Option for hide selection column in ant table #19335 - Issuehunt

Is there a way to pass an additional 'classname' to the ant-table-selection-column rather than overriding it? posted by superadminfabian about 3 years ago....

Table - Ant Design

Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox...

How to select rows and add custom selection options in Ant ...

reactjs #antd # table # select In this video tutorial I have ... on - How to add selection option on antd table...

“hide column in antd table using js / react with conditional ...

how to hide component in react · antd modal hide ok button · antd dropdown stop propogation ; ant design table sort string...