I am using rst2pdf for converting an rst document. In the table of contents, I have the following
.
But I want the right aligned numbering, like the following
.
I am using the rst2pdf stylesheet for tableofcontents initialization. I didn't know how to adjust this alignment using the stylesheet or even at the rst format level.
The current configuration I set is:
.. contents:: Table of Contents
.. sectnum::
:depth: 2
I want the solution either at rst-level or at rst2pdf-level.
From the default stylesheet, I think this will pick up the item-list style, which is defined as:
item-list:
parent: bodytext
commands: []
[VALIGN, [ 0, 0 ], [ -1, -1 ], TOP ]
[RIGHTPADDING, [ 0, 0 ], [ 1, -1 ], 0 ]
colWidths: [20pt,null]
These commands: [] are actually table styles ... check the docs for tables and that may help with how to align each column, try setting the ALIGN value, something like this (sorry I don't have an example handy)
[ALIGN, [ 0, 0 ], [ -1, -1 ], RIGHT ]
Related
and I have the following code:
return (
<Box sx={{ height: 400 }}>
<DataGrid columns={columns} rows={rows} />
</Box>
)
and I am having the table getting rendered as:
I want the column of the email to take the width of the widest row cell automatically, so I want the table to render as follows:
My colums and rows look simply as follows:
const columns = [ { field: "firstName" }, { field: "lastName" }, ...etc ]
const rows = [
{ firstName: "Camil Pasa Sokak", lastName: "In The Village", ...etc },
... etc
]
How to do it in MUI x (community table, the free one)?
I want the column of the email to take the width of the widest row cell automatically
please note: since the table is wide, it will automatically show you a scrollbar (x and y scrollbars). I want to keep this functionality, I want to keep these scrollbars (from the x and y) I don't want to disable them.
Here's a sandbox instnce:
https://codesandbox.io/s/strange-newton-z6pwj4?file=/src/App.js
Looking at the docs for the datatable component you are using, it's not super clear the best way to go about it. The crux of the problem is that this is a div + flexbox table and not a true html table. As such, cells within a single column are not really "bound" to each other the same way as a regular html table.
There is a page which addresses column dimensions, but I could not find a satisfactory solution there. I was particularly disappointed that maxWidth seems to do nothing. The closest I got was setting a fixed column width, but I don't think that's what you want:
const columns = [{
field: "email", width: 300,
}]
So then I moved on to their styling cells page, which allows you to have much more control over styling, but this still doesn't work because one flex cell does not affect the size of all flex cells in a column - each row has a different sized cell based on the size of the email address.
const columns = [{
field: "email", cellClassName: "foobar",
}]
<DataGrid columns={columns} rows={rows} sx={{
"& .foobar": {
maxWidth: "300px !important"
}
}} />
So, my best suggestion is to loop over the data, find the longest email address, and set the fixed width based on that. This kinda sucks, but I don't see another way to properly set dimensions for a flexbox-based table:
const longestEmail = rows.reduce((longest, row) => {
return row.email.length > longest.length ? row.email : longest
}, '');
const columns = [{
// play around with the multiplier until you find a suitable width
field: "email", width: longestEmail.length * 9,
}]
This is from the Documentation..Number Signature
<DataGrid
columns={[
{ field: 'username', colSpan: 2, hideable: false },
{
field: 'organization',
sortable: false,
filterable: false,
hideable: false,
},
{ field: 'age', hideable: false },
]}
rows={rows}
{...other}
/>
you can use colspan but it sets all cells in the column to span a given number of columns.
const columns = [{
field: "email",colSpan:2,
},]
I have an Algolia search widget set up in my site, however the results all have their list number next to them. How do I style this to remove the numbers?
The docs have this under cssClasses.
instantsearch.widgets.infiniteHits({
// ...
cssClasses: {
root: 'MyCustomInfiniteHits',
list: [
'MyCustomInfiniteHits',
'MyCustomInfiniteHits--subclass',
],
},
});
So I tried something like this.
instantsearch.widgets.infiniteHits({
// ...
cssClasses: {
list: [
'list-style: none',
],
},
});
but the numbers still appear.
My widget is inside of a Django template if that helps and I am using instantsearch.js.
Ok, I actually figured it out. The string that you include inside of
list: [
'customClass'
]
is the class that is applied to the element. So you can then just add styling to your stylesheet.
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.
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; }
Is it possible to automatically have the same height in all columns when using ColumnSets (without specifying the height manually)?
new table({
store: store,
columnSets: [
[
[colA]
],
[
[colB]
]
]
}, "grid1");
If all the columns are within the same ColumnSet there is no problem.
new table({
store: store,
columnSets: [
[
[colA, colB]
]
]
}, "grid2");
Please take a look at this fiddle:
http://jsfiddle.net/dawp21Ly/