-
|
Hey, Here's my current solution: <Table data={tableData} theme={theme} layout={{ custom: true }}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell style={{ width: "50px" }}>ID</HeaderCell>
<HeaderCel style={{ width: "100px" }}l>Name</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row onClick={onRowClicked} key={item.id} item={item}>
{(tableItem) => (
<>
<Cell style={{ width: "50px" }}>{tableItem.id}</Cell>
<Cell style={{ width: "100px" }}>{tableItem.name}</Cell>
</>
)}
</Row>
))}
</Body>
</>
)}
</Table>The issue is, I have to set it at HeaderCells and at RowCells. Is there another possibility that i overlooked? What do you recommend? const columnWidths = `
&:nth-child(1) {
width: 30%;
}
&:nth-child(2) {
width: 90%;
}
`;
...
BaseCell: `
border-right: 1px solid #e3e4e5;
${columWidths}
`,
...Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
For the project we are using this table for, we agreed on creating custom themes for every table variation, even if it's only for the layout. The layout feature was implemented very quickly, that's why I used the theming capabilities that were already provided by the library. It also had to work with the resize feature, which was given when using the custom theme. Let me know if you would want to explore any other way of introducing layouts. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I understand it. I need a base-theme and customize just small parts of it (i.e. columnWidth). I use following approach: function SpecificTable() {
const columns = [
{ header: "ID", accessor: "id", width: "10%", viewFn=null, sortFn=null, filterFn=null },
{ header: "First Name", accessor: "firstName", width: "45%", viewFn=null, sortFn=null, filterFn=null },
{ header: "Last Name", accessor: "lastName", width: "45%", viewFn=null, sortFn=null, filterFn=null },
];
return (
<GeneralTable data={tableData} columns={columns} />
);
}function GeneralTable({ columns, data, onRowClicked }) {
const theme = useTableTheme(columns);
return (
<Table data={tableData} theme={theme} layout={{ custom: true }}>
{(tableList) => (
<>
<Header>
<HeaderRow>
{columns.map(({ header }) => (
<HeaderCell>{header}</HeaderCell>
))}
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row onClick={onRowClicked} key={item.id} item={item}>
{(tableItem) => (
<>
{columns.map(({ accessor, viewFn }) => (
<Cell>{viewFn(tableItem[accessor])}</Cell>
))}
</>
)}
</Row>
))}
</Body>
</>
)}
</Table>
);
}import { useTheme } from "@table-library/react-table-library/theme";
const useTableTheme = (columns) => {
const columnWidths = columns
.reduce((columnWidths, { width }, index) => {
if (!width) {
return columnWidths;
}
return columnWidths.concat(
`&:nth-child(${index + 1}) { width: ${width} }`
);
}, [])
.join("\n");
return useTheme({
Table: `
border-radius: 4px;
border: 1px solid #e3e4e5;
`,
BaseRow: `
color: #212121;
&:hover {
color: #212121;
cursor: pointer;
}
height: 35px;
font-size: 14px;
border-bottom: 1px solid #e3e4e5;
`,
HeaderRow: `
font-weight: bold;
height: 60px;
background-color: #f9fafb;
`,
Row: `
border-bottom: 1px solid #e3e4e5;
&:hover {
background-color: #f5f5f5;
}
`,
BaseCell: `
border-right: 1px solid #e3e4e5;
${columnWidths}
`,
});
};
export { useTableTheme };WDYT? |
Beta Was this translation helpful? Give feedback.
-
|
This should do it, yes :) |
Beta Was this translation helpful? Give feedback.
For the project we are using this table for, we agreed on creating custom themes for every table variation, even if it's only for the layout.
The layout feature was implemented very quickly, that's why I used the theming capabilities that were already provided by the library. It also had to work with the resize feature, which was given when using the custom theme.
Let me know if you would want to explore any other way of introducing layouts.