1.7.2 • Published 1 month ago
@leewinter/auto-table v1.7.2
@leewinter/auto-table
Simple react component to auto generate tables from arrays or objects.
Demo of the latest Storybook build can be found on github pages https://leewinter.github.io/auto-table.
Getting Started
Install using npm
npm install @leewinter/auto-table
Usage
import { AutoTable } from "@leewinter/auto-table";
const testData = [
{ id: 1, name: "Lee", mobile: "na" },
{ id: 2, name: "Danny", mobile: "0192272727" },
{ id: 3, name: "Tom", mobile: "987654321" },
{ id: 4, name: "Mark", mobile: "000000000" }
];
// From array
<AutoTable data={testData} options={{
humanReadableHeaders: true,
pagination: {
itemsPerPage: 10,
usePagination: false
}
}} />
// From object
<AutoTable data={testData[0]} />
Options
{
// Any object or array
data: [{col1: "1", col2: "test", embedded: ["test1", "test2"]}]
|| {col1: "1", col2: "test"}
|| ["test1", "test2"],
options: {
pagination: {
usePagination: true,
itemsPerPage: 10,
},
showSearch: false,
humanReadableHeaders: true,
}
}
Styling
@emotion/react is used for styling.
The table will default to the dark theme. This behaviour can be overriden using the ThemeProvider component.
import { AutoTableThemeProvider, lightTheme } from "@leewinter/auto-table";
...
const myTheme = {...lightTheme, bgColorHead: "purple" }
<AutoTableThemeProvider theme={myTheme}>
<AutoTable data={[{col1: "1", col2: "test"}]} />
</AutoTableThemeProvider>
AutoTableThemeProvider accepts the following type.
export interface AutoTableTheme extends Theme {
colors: {
txtColorActive: string;
bgColorActive: string;
borderColorStandard: string;
borderColorTr: string;
txtColorDisabled: string;
bgColorHead: string;
bgColorEvenRow: string;
txtColorEvenRow: string;
txtColorHead: string;
borderColorBotTr: string;
};
font: {
fontFamily: string;
};
}
If you want to use the current theme in your code.
import { useAutoTableTheme } from "@leewinter/auto-table";
...
const { theme } = useAutoTableTheme();
const headerTextColor = theme.txtColorHead;
1.7.2
1 month ago
1.6.8
1 month ago
1.6.7
1 month ago
0.6.3
8 months ago
0.5.3
8 months ago
0.5.2
9 months ago
0.4.0
10 months ago
0.3.2
10 months ago
0.3.1
10 months ago
0.2.0
10 months ago
0.1.4
10 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago
0.0.8-alpha.5
10 months ago
0.0.8-alpha.4
10 months ago
0.0.8-alpha.3
10 months ago
0.0.8-alpha.1
10 months ago
0.0.8-alpha
10 months ago
0.0.8
10 months ago
0.0.7
10 months ago
0.0.6
10 months ago