I using react-table and I want to use table-layout: fixed.
I would like to specify the width of the columns using classNames.
Is there any way react-table allows to set a fix width for some columns ?
If not, How could I add classNames to <th> elements ?
This issue resolves adding classNames to cells https://github.com/tannerlinsley/react-table/issues/1612 but not for <th> elements.
What would it be a viable way?
ps: I would like to avoid using :nth-child selector since I dont want to have a dependency to columns position on the table.
Ok, I found an answer when reviewing examples code.
https://react-table-omega.vercel.app/docs/examples/data-driven-classes-and-styles
The solution is by defining extra properties in the column:
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
className: 'user',
},
],
},
This information will be available in column. Now we can pass these information to the column.getHeaderProps([....]). It will take into account the props we passed.
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps([
{ className: column.className },
])}>
{column.render('Header')}
</th>
))}
</tr>
In ghis way, <th> can receive the props we set in columns array.
Related
When using useRowSelect and useTable how can I specify column width for the first column so that it never exceeds the width of the checkboxes? I don't want to use useFlex as I want to preserve column widths based on the header width.
You'll notice when the table is set to 100% width the first column starts to grow if you expand your browser window.
Here's an example:
https://codesandbox.io/s/youthful-hamilton-j0rev?file=/src/App.js
I'm also open to just grabbing the Header and Cell from where I'm pushing into the columns array and adding a className, but wasn't able to find a way to do that. How can I add a className so that the table cell that surrounds this column data has a className to attach to:
(hooks) => {
isRowSelectable &&
hooks.allColumns.push((columns) => [
{
id: 'selection',
minWidth: 35,
width: '35px',
maxWidth: 35,
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox alignSelf="center" {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }: any) => {
row.className = '123';
return <Checkbox alignSelf="center" {...row.getToggleRowSelectedProps()} />;
}
},
...columns
]);
}
Since Array.map can pass the index of the element, it's fairly simple to conditionally add a className to the cell if the row index is 0:
{
rows.map((row, i) => {
prepareRow(row);
return (
<td className={i === 0 ? "class-name" : ""} {...cell.getCellProps()>
{cell.render("Cell")}
</td>
)
}
If you want the same class to apply to the headers, you can do the same thing on the <th> or <tr> elements, since those are also rendered with Array.map. You don't actually need to touch the columns object at all for this change.
I'm using an expandable table from antd design version 4.10 in my app with Next.js v10.0.4. When I clicked in + button in table its suppose to open only the row which is selected but I don't know why it is opening all the rows at same time.
This is my table component:
<Table
size="small"
dataSource={data}
columns={updateColumns}
expandable={{
expandedRowRender: (record) => (
<p style={{ margin: 0 }}>{record.description}</p>
),
rowExpandable: (record) => record.level !== "3",
onExpand: (expanded, record) =>
console.log("onExpand: ", record, expanded),
}}
/>
Is exactly the same code as documentation in antd design: https://ant.design/components/table/#components-table-demo-expand
You need a key property for each record in your data. If you have no key property, you can specified it on <Table> component using rowKey prop
<Table rowKey="your_data_id" />
I had the same problem with the table, I issue is not the code but your data. For the table work you need to add a "key" to every set of json data that you are giving to the table .
Example:
[
{
"key": 1,
"name": "hello",
"surname": "world"
},
{
"key": 2,
"name": "hello",
"surname": "world"
}
]
This probably due to missing keys in your dataSource array which is fed into the Table, which can be verified by a message in the DevTools console saying smth about missing key.
I used an example of bootstrap datatable to have a sortable table on my symfony project. I use datatables.net
With this javascript code :
$(document).ready(function() {
$('#datatable').DataTable();
} );
And my table in HTML :
<table id="datatable" class="table table-striped">
<thead>
<tr>...
The only problem is that I don't want all my columns to be sortable (some columns only contain a checkbox or a button for example). Moreover with this table and this javascript code I automatically have a search bar as well as Previous Next buttons and other options that appear automatically. I would like to be able to modify this default template by removing all these options that I don't need. Do you have an idea how to adapt this datatable?
Thanks in advance
You should read documentation for datatables. https://datatables.net/extensions/rowreorder/examples/initialisation/restrictedOrdering.html
Example:
// add class reorder on column, that you want to order
$(document).ready(function() {
var table = $('#example').DataTable( {
rowReorder: true,
columnDefs: [
{ orderable: true, className: 'reorder', targets: 0 },
{ orderable: false, targets: '_all' }
]
} );
} );
Please help. I have been using Vue Tables 2 for > 2 years now, and I have never had this problem. My table shows up perfectly as usual, but now whenever I click on a cell, it is surrounded by a blue outline on chrome and a dotted outline on firefox. It is exhibiting the same behavior as if I had clicked on an input. I went through my Vue Tables 2 options one by one, disabling each in turn and it did not change the behavior. I looked through bootstrap 4 tables documentation, and could not find the same behavior as a option, so i believe it is vue tables that is doing it. The demo fiddle on the Vue Tables 2 page also has this behavior. It is very distracting and I am trying to get it to stop.
My goal is to have the table show the behavior it has before, which is to do nothing when you click on a cell.
I am using Bootstrap 4.4, and Vue-Tables-2 version 1.6.25
My options array looks like so
tableOptions: {
skin: 'table table-sm table-hover border-0',
filterable: true,
pagination: { chunk:4 },
perPageValues: [],
perPage: 18,
dateColumns: ['created_at'],
dateFormat: 'MM-DD-YYYY',
toMomentFormat: 'YYYY-MM-DD H:mm:ss',
texts:{
filter:"",
count:"",
filterPlaceholder:"Search",
page:"Page:",
noResults:"No matching records",
loading:'Loading...',
},
columnsClasses: {
cntCnt: 'text-center noOutline',
qtCnt: 'text-center noOutline',
statusName: 'text-center noOutline',
created_at: 'text-center ',
},
headings: {
id: 'Ref',
name: 'Name',
cntCnt: 'Contacts',
qtCnt: 'Quotes',
statusName: 'Status',
created_at: 'Created',
orgSelect: '',
},
}
I have added a picture that shows whats going on.The outline is arouns any and every cell I click, including the column headers.
That is the focus selector of CSS whose style is being applied. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
You need to override this CSS and set border to none.
You can also do this:
:focus { outline: none; }
I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.