Skip to main content

Page

Basic​

Entity : Company

Let's say you want to create a simple Crud. So let's take an example how you do it, check it out below.

create a file at app/asgard/companies/page.tsx

For AddModal developent have to create state, just like :​

const [isAddCompanyVisible, setAddCompanyVisible] = useState(false);

For EditModal developent have to create state, just like :​

const [isEditCompanyVisible, setEditCompanyVisible] = useState(false);

For SelectedState developent have to create state, just like :​

const [selectedCompany, setSelectedCompany] = useState<ICompany>();

For Modal Refresh have to create state, just like :​

const [refreshKey, setRefreshKey] = useState(0);
app/asgard/companies/page.tsx
<ContainerComponent>
    <div className="flex">
        <h3 className="text-3xl">Companies</h3>
    </div>

    <div>
        <DataTable
            key={refreshKey}
            model={'Company'}
            query={{
                // condtions apply here 
                where: {    
                    is_deleted: 0 
                    }
            }}
            headerActions={[
                {
                    text: 'Add Company',
                    icon: 'bi-plus',
                    onClick: () => setAddCompanyVisible(true)
                }
            ]}
                    
            headers={[
                {
                    text: 'Company Code',
                    field: 'code' 
                },
                {
                    text: 'Company Name',
                    field: 'name'
                },
                {
                    text: 'Website',
                    field: 'website'
                },
                {
                    text: 'Email',
                    field: 'email'
                },
                {
                    text: 'Contact Number',
                    field: 'mobile'
                },
                {
                    text: 'isActive?',
                    field: 'is_active',
                    isAction: true,
                    isToggle: true
                },
                {
                    // Actions Basically for ADD and Edit
                    text: 'Actions',
                    isAction: true,
                    edit: {
                        onClick: (result: ICompany) => {
                        setSelectedCompany(result);
                        setEditCompanyVisible(true);
                        }
                    },
                    isDelete: true
                }
            ]}
        />
    </div>

    {/* Modals */}
    <AddCompanyModal isVisible={isAddCompanyVisible} onClose={() => setAddCompanyVisible(false)}
        onSuccess={() => {
            setAddCompanyVisible(false); //To close the modal
            setRefreshKey((prev) => prev + 1); // To Refresh the DataTable
        }}
    />
    {
        selectedCompany ?
            <EditCompanyModal isVisible={isEditCompanyVisible} onClose={() => setEditCompanyVisible(false)}
            data={selectedCompany}
            onSuccess={() => {
                setEditCompanyVisible(false); //To close the modal
                setRefreshKey((prev) => prev + 1); // To Refresh the DataTable
            }}
        /> : null
    }
</ContainerComponent>

The above code will render page like this.

Basic TextInput